指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为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>










