HTML
CSS
HTML5
MediaQueries
Viewport

ViewPortとメディアクエリについてまとめ


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などの幅高さを指定すると、スクロールバーを存在しないものとして値をとるため、若干ズレが生じる。そのため、ブロック要素の幅は%で指定した方がよい。

ビューサイズによってフォントサイズを変更したい場合などに使うとよい。