2016 06/23 07:46
Category : 本
レイアウトを調整する前に実際のデバイスで表示を確認すると、 サブメニューの右側に大きな余白ができるのは「600 px」と「768 px」の二つのブレイクポイントの間にあるデバイスであることが確認できます。
そこで、@media(min-width: 600px) and (max-width: 767px)に設定を 追加し、 サブメニューを2段組のレイアウトにしていきます。
BOX4を2つのボックスに分割し、一つ目のボックスに「特集記事」 2つ目のボックスに「おすすめ記事」 「人気の記事」 メニューを 入れた形にします。 次にボックスを横に並べ 、間隔を調整する。 横幅を 固定するため 各ボックスのwidthを「1000px 」と指定しています。 また中央配置にしました。
写真のは先の例でネクサス7を使用しています。
コンパクトに効率的な配置ができるものですね。