
互い違いレイアウトの組み方〜レスポンシブ編〜
こんにちは! はっちゃんです。
今回は、前回の「互い違いレイアウトの組み方」記事の続編です。
互い違いレイアウトの組み方〜レスポンシブ編〜
前回の状態から少し制約を加えて、「写真は画面幅いっぱいに広げるパターン」の組み方をご紹介します。
最低の幅を決め、一定以上縮小したときはレイアウトが崩れないようにし、広がったときは際限なく写真が横に広がり続けるようにしてみます。これは、案件でもよくあるパターンです。
.container {
@media all and (min-width: 769px) {
width: 800px;
}
}
を
.container {
@media all and (min-width: 769px) {
min-width: 1280px;
}
}
に修正。
.alternate-layout__detail {
@media all and (min-width: 769px) {
width: 400px;
}
}
上記を追記。
これだけで完成です。
See the Pen Alternate Layout3 by k_hatsushi (@hatsushi_kazuya) on CodePen.
前回の画面
今回修正した画面
画面幅が広がったら写真の横幅は伸び続け、1280px以下になると横にスクロールできるようになりました。
いかがでしたでしょうか?
ブラウザ幅を拡大・縮小したときのレイアウトのイメージは、フロントエンドとして提案できる部分です。デザインの段階で話すことができるとよいですね!
前回の記事と合わせて、参考にしていただければ幸いです。