<resolution>

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

<resolution> CSS data type , used for describing resolutions in media queries , denotes the pixel density of an output device, i.e., its resolution.

On screens, the units are related to CSS inches, centimeters, or pixels, not physical values.

句法

<resolution> data type consists of a strictly positive <number> followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

Units

dpi: Represents the number of dots per inch . Screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm .
dpcm: Represents the number of dots per centimeter . As 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi .
dppx: Represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px , 1dppx 相当于 96dpi , which corresponds to the default resolution of images displayed in CSS as defined by image-resolution .
x: 别名化的 dppx .

注意： Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0dpi , 0dpcm ，或 0dppx .

范例

Use in a media query

@media print and (min-resolution: 300dpi) { ... }

Valid resolutions

96dpi
50.82dpcm
3dppx

Invalid resolutions

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.

规范

规范	状态	注释
CSS Values and Units Module Level 4 The definition of '<resolution>' in that specification.	编者草案	添加 `x` unit.
CSS Values and Units Module Level 3 The definition of '<resolution>' in that specification.	候选推荐	添加 `dppx` unit.
Media Queries The definition of '<resolution>' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<resolution>	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 8 完整支持 8 部分支持 3.5 注意事项注意事项 Supports `<integer>` values only.	IE 完整支持 9	Opera 完整支持 9.5	Safari 不支持 No 注意事项不支持 No 注意事项注意事项见 bug 78087 .	WebView Android 完整支持 ≤37	Chrome Android 完整支持 29	Firefox Android 完整支持 8 完整支持 8 部分支持 4 注意事项注意事项 Supports `<integer>` values only.	Opera Android 完整支持 10.1	Safari iOS 不支持 No 注意事项不支持 No 注意事项注意事项见 bug 78087 .	Samsung Internet Android 完整支持 2.0
`dpcm` unit	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 8	IE 完整支持 9	Opera 完整支持 16 完整支持 16 不支持 10 — 15	Safari 不支持 No	WebView Android 完整支持 ≤37	Chrome Android 完整支持 29	Firefox Android 完整支持 8	Opera Android 完整支持 16 完整支持 16 不支持 10.1 — 14	Safari iOS 不支持 No	Samsung Internet Android 完整支持 2.0
`dpi` unit	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 8	IE 完整支持 9	Opera 完整支持 16 完整支持 16 不支持 10 — 15	Safari 不支持 No	WebView Android 完整支持 ≤37	Chrome Android 完整支持 29	Firefox Android 完整支持 8	Opera Android 完整支持 16 完整支持 16 不支持 10.1 — 14	Safari iOS 不支持 No	Samsung Internet Android 完整支持 2.0
`dppx` unit	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 16	IE 不支持 No	Opera 完整支持 12.1	Safari 不支持 No	WebView Android 完整支持 ≤37	Chrome Android 完整支持 29	Firefox Android 完整支持 16	Opera Android 完整支持 12.1	Safari iOS 不支持 No	Samsung Internet Android 完整支持 2.0
`x` unit	Chrome 完整支持 68	Edge 完整支持 79	Firefox 完整支持 62	IE 不支持 No	Opera 完整支持 55	Safari 不支持 No	WebView Android 完整支持 68	Chrome Android 完整支持 68	Firefox Android 完整支持 62	Opera Android 完整支持 48	Safari iOS 不支持 No	Samsung Internet Android 完整支持 10.0

图例

完整支持
不支持
见实现注意事项。

另请参阅

resolution media feature
Using @media queries

元数据

最后修改： Jun 25, 2020

CSS
CSS 参考
CSS Types
特性
1. <angle-percentage>
2. <angle>
3. <basic-shape>
4. <blend-mode>
5. <custom-ident>
6. <dimension>
7. <frequency-percentage>
8. <frequency>
9. <gradient>
10. <image>
11. <integer>
12. <length-percentage>
13. <length>
14. <number>
15. <percentage>
16. <ratio>
17. <resolution>
18. <shape>
19. <string>
20. <time-percentage>
21. <time>
22. <transform-function>
23. <url>
24. color
25. flex
26. ident
27. position

在此页

句法