CSS参考手册
媒体查询 | Media Queries
<分辨率> |
<resolution>
CSS数据类型,用于媒体查询,表示输出设备的像素密度,即其分辨率。
在屏幕上,长度指的是CSS 长度,单位为英寸、厘米或像素,而不是物理值。
语法
该<resolution>数据类型由严格的正数<number>和下面列出的一个单元组成。(dpi
, dpcm
, ...). 与所有CSS维度一样,单位文字和数字之间没有空格。
虽然这个数字0
总是相同的单位,但单位不得省略。换句话说,0
无效且不表示0dpi
,0dpcm
,或0dppx
...
单位
dpi
表示每英寸点 屏幕通常包含72或96 dpi,但打印的文档通常有更大的dpi。因为1英寸等于2.54厘米,1dpi ≈ 0.39dpcm
dpcm
表示每厘米点1英寸等于2.54厘米,1dpcm ≈ 2.54dpi
...
表示每个px单元的点数。由于CSS在CSS px中的固定比例为1:96,1dppx相当于96dpi,这对应于图像分辨率所定义的CSS中显示的图像的默认分辨率。image-resolution
.
实例
有效实例
96dpi
50dpcm
3dppx
@media print and (min-resolution: 300dpi) { ... } Correct use in a media query
无效示例
72 dpi Spaces are not allowed between the number and the unit.
ten dpi The number must use digits only.
0 The unit is required.
规范
Specification |
Status |
Comment |
---|---|---|
CSS Values and Units Module Level 3The definition of '<resolution>' in that specification. |
Candidate Recommendation |
Factorization of the type in a more generic specification. No change |
CSS Image Values and Replaced Content Module Level 3The definition of '<resolution>' in that specification. |
Candidate Recommendation |
Added the dppx unit |
Media QueriesThe definition of '<resolution>' in that specification. |
Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
29 |
20 (12.10240) |
3.5 (1.9.1)1 |
9 |
9.5 |
No support2 |
dppx |
29 |
20 (12.10240) |
16.0 (16.0) |
No support |
12.10 |
No support |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
No support2 |
? |
(Yes) |
? |
(Yes) |
No support2 |
dppx |
? |
? |
16.0 (16.0) |
? |
12.10 |
? |
媒体查询 | Media Queries相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。