5x8小时服务热线:131 4102 7650(同微信)
您当前的位置:首页 > 网站常识 - 网站建设

媒体查询可以检测设备的哪些特性?

来源:北京建站公司 标签:媒体查询css3
分享到:
创建媒体查询时,最常用的是设备的视口宽度(width)和屏幕宽度(device-width)。
下面是媒体查询可以检测的所有特性:

width:视口宽度
height:视口高度
device-width:设备屏幕的宽度(渲染表面的宽度)
device-height:设备屏幕的高度(渲染表面的高度)
orientation:设备处于横向(lateral)还是纵向(portrait)
aspect-ratio:基于视口宽度和高度的宽高比。比如 16/9 代表是16:9比例的显示屏
device-aspect-ratio:基于设备渲染平面宽度和高度的宽高比
color:每种颜色的位数。比如16 会检测设备是否拥有16位颜色
color-index:设备的颜色索引表中的颜色数。必须是非负整数。
monochrome:检测单色帧缓冲区中每像素所使用的位数。必须是非负整数,如2
resolution:检测屏幕或打印机的分辨率,如min-resolution:300dpi,还可以接受每厘米像素点数的度量值,min-resolution:118dpcm
scan:电视机的扫描方式,值可以设为progressive(逐行扫描)或interlace(隔行扫描)。如720pHD电视(720p的p即表明是逐行扫描)匹配scan:progressive,而1080iHD电视(1080i中的i表明是隔行扫描)匹配scan:interlace
grid:用来检测输出设备是网格设备还是位图设备

在上面所有的特性中,除了scan和grid外,都可使用min和max前缀来创建一个查询范围。如:
@media screen and (min-width:200px) and (max-width:360px){
...
}

以上就是所描述的媒体查询所有的特性,不过最常见最常用的就是使用width和device-width属性,其他很少去检测。如果有你想用的特性,不妨去试试看看效果吧!
备注:本篇文章由加网编辑原创内容,转载请注明出处:转自加网

相关网站常识

更多