全面解析CSS Media媒体查询使用操作(推荐)

2020-05-11 18:05:45易采站长站整理

  指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为0

  向所有能显示颜色的设备应用样式表


<style>
@media (color){
.box{height: 100px;width: 100px;background-color: lightblue;}
}
</style>
<div class="box"></div>

【2】颜色索引(color-index)

  颜色索引指定了输出设备中颜色查询表中的条目数量,如果没有使用颜色查询表,则值等于0

  向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示,说明返回值为0)


<style>
@media (min-color-index: 256){
.box{height: 100px; width: 100px;background-color: lightgreen;}
}
</style>
<div class="box"></div>

【3】宽高比(aspect-ratio)

  宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例

  向可视区域是正方形或者是宽屏的设备应用样式表


<style>
@media (min-aspect-ratio: 1/1) {
.box{height: 100px;width: 100px; background-color: lightgreen; }
}
</style>
<div class="box"></div>

【4】设备宽高比(device-aspect-ratio)

  设备宽高比描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例

  向宽高比为16:9的特殊宽屏设备应用样式表


<style>
@media (device-aspect-ratio:16/9) {
.box{ height: 100px;width: 100px; background-color: pink;}
}
</style>
<div class="box"></div>

【5】设备高度(device-height)

  设备高度描述了输出设备的高度

  向显示在最小高度1000px的屏幕上的文档应用样式表


<style>
@media (min-device-height: 1000px) {
.box{ height: 100px;width: 100px; background-color: pink;}
}
</style>
<div class="box"></div>

【6】设备宽度(device-width)

  设备宽度描述了输出设备的宽度

  向显示在最小宽度1000px的屏幕上的文档应用样式表


<style>
@media (min-device-width: 1000px) {
.box{ height: 100px; width: 100px;background-color: lightblue; }
}
</style>
<div class="box"></div>