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