【レスポンシブWebデザイン】viewport

viewportとは

• ブラウザの表示領域を設定する機能。
• meta要素のcontent属性で設定する。

viewportで設定できるプロパティ

名称	説明	設定できる値
width	ビューポートの横幅	数値(pxやvwなど)  device-width(画面の幅)
initial-scale	ビューポートの拡大値の初期値	拡大率(0.0~10.0)
minimum-scale	ビューポートの拡大値の最小値	拡大率(0.0~10.0)
maximum-scale	ビューポートの拡大値の最大値	拡大率(0.0~10.0)
user-scalable	ユーザによるWebページの拡大・各省の可否	yes / no

CSSにはviewportを基準といて要素の幅や高さを設定できる単位がる。

viewportを基準としたCSSの単位

名称	説明
vw	viewportの横幅に対する割合
vh	viewportの高さに対する割合
vmin	viewportの横幅と高さのうち、値が小さいものに対する割合
vmax	viewportの横幅と高さのうち、値が大きいものに対する割合