レスポンシブ対応とはPC用のWEBをスマホやタブレット用にしていくことです。
画面を横仕様から縦仕様に変換します。段々と縮めて行くのですが、画像やボタンが横並びに配置されていたものは縮みすぎると見えなくなったりボタンが押しにくくなったりするので、どこかで縦横を切り替える分岐点が必要となってきます。
それをブレイクポイント(BP)と言います。
文字列もある程度は収縮して画面サイズに応じて自動で対応していくのですが、ちょうど良さげなところで上手く改行しなかったりします。
そういった所をブレイクポイントでメディアクエリという合図を記述し仕様を変化させ対応させていきます。ここから先はこれでやってねという指示合図ですね。
CSSで@media (max-width: 768px)と記述します。
端的には768px以下はこれで行きましょうって事です。まずは画像の縦並べです。
これはflex-directionプロパティで行いました。
758pxになったら縦に並んで下さいっていう指示合図です。
それとメインビジュアル。
スマホ幅にするためには縮んでくると小さくなってしまうので画像をスマホ用の縦長に切り替える。
これはhtmlでpictureタグを使用してブレイクポイントにきたらスマホ用の縦長対応の画像に切り替える指示します。これで単純にスマホ仕様らしくなります。769pxまではPC用、758pxでスマホ用に切換。
このタグを使えばサイズ違いだけではなく別の絵柄の画像に変えることもできるのでそれも良いですよね。CSSのoject-fit:coverで両端を省くのもアリですが、ここはpictureタグでいきました。
こんなときはこれをというのが少しは解ってきた感じではありますが、いざ使うとそれだけでは完結しないのでそれに組み合わせて使う他のプロパティも慣れていかないといけません。 まだまだ底は深い。
コメント