-webkit-device-pixel-ratio
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年10月.
-webkit-device-pixel-ratio CSS 非标准布尔型媒体特性是 resolution 标准媒体特性的替代方案。
备注：
如果可以，请改用标准的 resolution 媒体特性查询。虽然此前缀媒体特性是 WebKit 特性，但其他浏览器引擎也可能支持它。详见下文的浏览器兼容性。
语法
-webkit-device-pixel-ratio 特性被指定为一个 <number> 类型的值。它是一个范围特性，这意味着你还可以使用带前缀的 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 变体，分别用于查询最小值和最大值。
值
实现
css
/* 隐含的单位是“dppx”： */
@media (-webkit-min-device-pixel-ratio: 2) {
/* … */
}
/* 它等价于： */
@media (min-resolution: 2dppx) {
/* … */
}
/* 类似于： */
@media (-webkit-max-device-pixel-ratio: 2) {
/* … */
}
/* 它等价于： */
@media (max-resolution: 2dppx) {
/* … */
}
示例
HTML
html
<p>这是对你设备像素密度的测试。</p>
CSS
css
/* 精确分辨率 */
@media (-webkit-device-pixel-ratio: 1) {
p {
color: red;
}
}
/* 最小分辨率 */
@media (-webkit-min-device-pixel-ratio: 1.1) {
p {
font-size: 1.5em;
}
}
/* 最大分辨率 */
@media (-webkit-max-device-pixel-ratio: 3) {
p {
background: yellow;
}
}
结果
规范
| Specification |
|---|
| Compatibility # css-media-queries-webkit-device-pixel-ratio |
浏览器兼容性
Loading…