“orientation”メディア・フィーチャー｜メディア・フィーチャー｜メディア・クエリ｜CSS－havin' a coffee break

＃

“orientation”メディア・フィーチャーについて

値	キーワード値(“portrait”、“landscape”)
タイプ	離散型

“orientation”メディア・フィーチャーは出力デバイスの描画領域の向きを表すメディア・フィーチャーです。

“orientation”メディア・フィーチャーは“width”と“height”の値の比率で表され、“height”の値が“width”の値よりも大きいか同じ場合は“portrait”、そうでない場合は“landscape”となります。

＃

指定できる値

値	説明
portrait	出力デバイスの描画領域(ビューポート)の高さが横幅よりも大きいか等しい
landscape	出力デバイスの描画領域(ビューポート)の横幅が高さよりも大きい

＃

サンプルコード



@media all and (orientation: landscape) {


p.sample {


 background-color: #00a497; /*■*/

 text-decoration: underline dotted;


}


}





@media all and (orientation: portrait) {


p.sample {


 background-color: #e198b4; /*■*/

 text-decoration: underline wavy;


}


}

メディア・クエリ~“orientation”メディア・フィーチャー

“orientation”メディア・フィーチャーについて

指定できる値

サンプルコード