ViewPortについて
head部分に以下を記述
<meta name="viewport" content="width=device-width, initial-scale=1”>
width=device-widthでデバイスに画面の幅を合わせる
initial-scale=1でデバイスと画面の倍率を合わせる
CSS メディアクエリを利用してレスポンシブにする
レイアウト崩れを防ぐために、要素に相対サイズを指定する
min-width: ブラウザの幅がクエリに定義された値よりも大きい場合にルール適用
max-width: ブラウザの幅がクエリに定義された値よりも小さい場合にルール適用
min-height,max-heightもある
orientation=portrait ブラウザの高さが幅と同じかそれ以上の場合にルール適用
orientation=landscape ブラウザの幅の値が高さよりも大きい場合にルール適用
ViewPortを基準とした単位
CSSにはViewPortを基準とした単位が4つある
vh: viewportの高さに基づいて指定できる。1vhはviewportの高さ1%のこと。
vw: viewportの幅に基づいて指定できる。1vhはviewportの幅1%のこと。
vmin: viewportの幅と高さで小さい方の寸法に基づいて指定できる。
vmax: viewportの幅と高さで大きい方の寸法に基づいて指定できる。
主要ブラウザでほぼ対応済み
（例）viewportの幅が1200px、高さ1000pxの場合
10vwはwidth:120px,12vhはheight:100pxとなる。
vminは高さの方が小さいので100px
vmaxは幅の方が大きいので120px
%指定と異なる部分
%指定は子要素の幅や高さは親要素の幅や高さに対して決定されるが、
ViewPort基準の単位を使用すると子要素が親要素より広い幅や高さを持てるようになる。
vhやvhでdivなどの幅高さを指定すると、スクロールバーを存在しないものとして値をとるため、若干ズレが生じる。そのため、ブロック要素の幅は%で指定した方がよい。
ビューサイズによってフォントサイズを変更したい場合などに使うとよい。