如何在CSS3中通过媒体查询引入不同分辨率样式？-css教程-PHP中文网

直接用@media (min-resolution: 2dppx)可稳定识别主流Retina屏，但需搭配(-webkit-min-device-pixel-ratio: 2)覆盖旧版iOS Safari；192dpi受系统缩放干扰易失效，而2dppx直连DPR更可靠；换@2x图必须显式设background-size为逻辑尺寸，否则高清图反糊。

如何在css3中通过媒体查询引入不同分辨率样式？

直接用 @media 配合 resolution 媒体特性即可，但要注意：它不适用于所有设备，且单位必须明确写 dppx 或 dpi，不能只写数字。

为什么 `resolution` 容易失效？

浏览器对 resolution 的支持很分裂——Chrome 和 Safari 支持 min-resolution，Firefox 仅支持 -moz-resolution（已弃用），而 Edge 在旧版本中行为不一致。更关键的是：resolution 检测的是**设备像素比（DPR）或物理分辨率**，不是 viewport 宽度，所以它和 max-width 是两类逻辑，混用时容易误判。

screen and (min-resolution: 2dppx) 表示 DPR ≥ 2（如 Retina 屏）
screen and (min-resolution: 192dpi) 表示每英寸至少 192 点（需换算：2dppx ≈ 192dpi @ 96 CSS px/in）
不写单位（如 (min-resolution: 2)）会直接被忽略
移动端 Safari 对 resolution 的支持仅限于部分 iOS 版本，iOS 15+ 才较稳定

`resolution` 和 `device-pixel-ratio` 怎么选？

优先用 resolution，它是标准属性；-webkit-min-device-pixel-ratio 是旧版 WebKit 私有前缀，现在仅作兼容补丁。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

标准写法：@media screen and (min-resolution: 2dppx) { ... }
兼容旧 Safari：@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
不要混用：and (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2) 会导致整个规则被丢弃（逻辑 and 失败）
现代项目可放弃 -moz- 和 -o- 前缀，它们早已无效

实际适配建议：别只靠 `resolution`

单靠分辨率切换样式风险高——比如高 DPR 手机可能 viewport 宽度只有 375px，但你写了 @media (min-resolution: 2dppx) and (min-width: 1024px)，这条规则永远不会命中。

真正可靠的组合是：resolution + width 或 orientation，例如：@media screen and (min-resolution: 2dppx) and (max-width: 768px)
图标/图片替换更稳妥的做法是用 srcset + sizes，而非纯 CSS 控制
字体、阴影、边框等细节优化才适合用 resolution 微调，比如 box-shadow: 0 0 4px rgba(0,0,0,0.2) 在 2x 屏上改用 8px

真正要小心的是：很多人把 resolution 当成“高清屏开关”，却忽略了它无法反映用户当前缩放行为、浏览器 zoom 设置或系统字体缩放——这些都会让实际渲染效果偏离预期。用之前，先在真机上连 DevTools 检查 window.devicePixelRatio 值是否和媒体查询匹配。