像素密度 | @media.resolution
@media.resolution
resolution CSS @media媒体功能可基于输出装置的像素密度，来应用样式。
语法
该resolution特征被指定为<resolution>表示输出设备的像素密度的值。这是一个范围功能，也就是说，您也可以使用前缀min-resolution和max-resolution变量分别查询最小值和最大值。
例子
HTML
<p>This is a test of your device's pixel density.</p>
CSS
/* Exact resolution */
@media (resolution: 150dpi) {
p {
color: red;
}
}
/* Minimum resolution */
@media (min-resolution: 72dpi) {
p {
font-size: 1.5em;
}
}
/* Maximum resolution */
@media (max-resolution: 300dpi) {
p {
background: yellow;
}
}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| Media QueriesThe definition of 'resolution' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | ? | (Yes) | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
