像素密度 | @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 | ? | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
