Media Queries: resolution

语法:

resolution<resolution>

接受min/max前缀:是

取值:

<resolution>
用以定义设备屏幕的像素密度。不允许负值

说明:

定义设备屏幕的像素密度(即屏幕质量)。如:96dpi, 300dpi, 118dpcm
  • 本特性接受minmax前缀,因此可以派生出min-resolutionmax-resolution两个媒体特性。

    简单列举几个应用示例:

    @media screen and (resolution){ … } @import url(example.css) screen and (min-resolution: 192dpi); <link media="screen and (resolution: 192dpi)" rel="stylesheet" href="example.css" />

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 橙色 = 通过第三方工具支持
IE Edge Firefox Chrome Safari Opera iOS
Safari
Android
Browser
Blackberry
Browser
Opera
Mobile
Chrome
for
Android
Firefox
for
Android
IE
Mobile
UC
Browser
for
Android
Samsung
Internet
QQ
Browser
Baidu
Browser
5.5-8 12+ 2-3 4-25 #1 3.1-3.2 #1 9 3.2-6.1 #1 2.1-4.3 #1 7+ 10+ 61 56 10-11 #1 11.4 4+ 1.2 7.12
9-11 #1 3.5+ 26+ 4-6 #1 9.5+ 7.0+ 4.4+
6.1+
  1. 通过selectivizr,IE6+也可支持。本页下方的示例已使用此方案。

示例: