Jan. 16th,2019
＃
“height”メディア・フィーチャーについて
| 値 | “<length>”値 |
| タイプ | 範囲型 |
“height”メディア・フィーチャーは文書が出力されるデバイスの描画領域の高さを表すメディア・フィーチャーです。
パソコンやスマートフォンのブラウザなどの連続メディアではスクロールバーの幅を含めたビューポートの高さを表します。プリンタ・デバイスやブラウザの印刷プレビューのようなページ化メディアではページ・ボックスの高さを表します。
値は範囲コンテキスト、もしくは“min-”接頭辞と“max-”接頭辞で範囲指定できます。
“height”メディア・フィーチャーは値が負である時は常に“偽”となります。ただし、範囲指定した値に正の部分があれば、その範囲では“真”か“偽”かが検証されます。
＃
＃
サンプルコード
@media all and (max-height: 320px) {
p.sample {
background-color: #00a497; /*■*/
text-decoration: underline dotted;
}
}
@media all and (min-height: 320px) and (max-height: 640px) {
p.sample {
background-color: #e198b4; /*■*/
text-decoration: underline wavy;
}
}
@media all and (min-height: 640px) {
p.sample {
background-color: #fabf14; /*■*/
text-decoration: underline dashed;
}
}
<p class="sample">
猫は、上のかぎり黒くて、ことはみな白き。
</p>
猫は、上のかぎり黒くて、ことはみな白き。
