目次(クリックでジャンプ)
第一段階
メディア別の？クエリとかを付け加えたのを別に作るとか面倒くさいので、「vw」(画面幅)単位を使ってみる。
例えば、左右マージンの指定として「calc(○○px + ⚫vw)」とすれば、画面の大きさに応じて(1次関数)マージンが大きくなる
pxよりemの方が融通が効いて良い
また、使っているうちに「vw」よりも「vmin」(画面幅と画面高さのうち小さい方)を使ったほうが適応性が高いと分かった。
デスクトップとモバイルでの調整の考え方
「calc(○○em + ⚫vmin)」を1次関数らしく「calc(avmin + bpx )」と書き直すと、こんなイメージになる。
((図))
まず、デスクトップを基準にテキトーな数値でa,bを決める。
次に調整が必要になるのは、①デスクトップは丁度いいがモバイルがでかい②デスクトップは丁度いいがモバイルが小さい③デスクトップがでかいがモバイルは丁度いい④デスクトップは小さいがモバイルは丁度いい の4通り
モバイルがでかい場合
モバイルが小さい場合
デスクトップがでかい場合
デスクトップが小さい場合