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