【レスポンシブWebデザイン】メディア特性

メディア特性とは

• スタイル適用対象メディアの画面サイズや画面の向き、解像度などの条件を表す情報。
• メディア特性を指定することで、メディアタイプと組み合わせてさまざまな条件を表すことができる。

主なメディア特性

メディア特性	説明	値
width  min-width  max-width	viewportの横幅  (最大値、最小値)	0以外の整数値
height  min-height  max-height	viewportの縦幅  (最大値、最小値)	0以外の整数値
device-width  min-device-width  max-device-width	スクリーンの横幅  (最大値、最小値)	0以外の整数値
device-height  min-device-height  max-device-height	スクリーンの縦幅  (最大値、最小値)	0以外の整数値
orientation	デバイスの向きを指定	landscape(横向き)
aspect-ratio	ブラウザの表示領域の縦横比	portrait(縦向き)
device-aspect-ratio	スクリーンの縦横比	整数値(横)/整数値(縦)
resolution  min-resolution  max-resolution	デバイスの解像度  (最大値、最小値)	整数値