Flexbox 10 (スマホ対応 - レスポンシブデザインに)

スマホのブラウザはFlexboxへの対応が一番遅れていたようですが、現在はだいたい対応しているようですね。

なので、ここでは非対応ブラウザへ対応させるという話ではなく、レスポンシブデザインにしてみる実験。

スマホに対応せるには、メディアクエリーを使う方法と、幅を自動伸縮させるレスポンシブデザインとがありますが、両方やってみる。

まず、固定幅の3カラムのレイアウトをFlexboxで作る。

このブログはスマホ対応になっていますが、上記のミニチュアレイアウトはスマホで見ても3カラムに見えるはず。

これを、まずはメディアクエリーを使ってみる。
ビューポートが狭いブラウザの場合に単純に設定幅の数値を小さくしてみると・・・

※幅が640pxより狭い時、flexを解除、幅が150pxになるように記述を追加したTEST2レイアウトを作ってみる。

@media screen and ( max-width:640px ) { .test1{width:150px;} .test2 .item2{display:block;} }

で、この記事をPC(幅640px以上の画面)で見ていると上のレイアウトと変わらないけれど、スマホで見てみると縦一列のレイアウトで幅が半分になっているはず。。。

（わざわざスマホで見なくても、ブラウザの幅を小さくすれば一緒ですね）

---

さて、メディアクエリーを使わずに完全レスポンス表示ができるか・・・ちょと難しそうな気がするが、やってみる。。。

※幅を「100%」に設定。もし固定幅だと、設定幅より小さい画面で見ると横にはみ出してしまう（横するロールになる）はずですが、％で指定しているので、どんな大きさのデバイスから見ても画面ぴったりになる。

レスポンシブデザインなら、外側を枠で囲って幅を制限してやれば、いちいちスマホで確認しなくても結果は同じですね。

幅300px

幅150px

幅が縮んでもレイアウトが崩れていませんね。

って、ちがーう。

幅が狭くなったら回り込みを解除するようにしたい。全部の幅を％で指定してしまったら、３カラムのまま縮むだけですね。幅が設定値を超えたら回り込みが解除されるようにしたいので、幅を固定幅にすればよいですね。

左右のカラムだけ固定幅にして、中央のカラムは最低幅を設定してみた。

幅170px

幅150px

幅100px

一応、狙い通り？

幅の限界を超えた瞬間に、回り込めなかったカラムが下に移動する。
幅は固定値ではなく、最低値(min-width)で指定しても同じですね。
min-widthをすべて同じにしておけば、回り込み出来なかったときに、すべて同じ幅のブロックになる。

min-width:150px;

※画面サイズが150pxを下回った場合でも150pxより縮まないので、横スクロールになる。
	
でもやっぱり、メディアクエリー使ったほうがスマートかなぁ・・・