最稳妥写法是media="(min-resolution: 2dppx)"，兼容主流浏览器且语义清晰；避免单独使用-webkit前缀或dpi值；高清样式应分离为独立CSS文件并通过link标签条件加载，确保不匹配时不发起HTTP请求。
link标签的media属性怎么写视网膜查询
直接用 media="(min-resolution: 2dppx)" 最稳妥。这个写法在 Chrome、Firefox、Safari（macOS/iOS）和 Edge 都能正确识别，且语义清晰——它查的是设备像素比（dppx），不是旧式 device-pixel-ratio 前缀语法。
别用 media="(-webkit-min-device-pixel-ratio: 2)" 单独写，它只在旧版 Safari/Chrome 生效，现代浏览器已不推荐；更不要只写 media="(min-resolution: 192dpi)"，因为 DPI 值依赖屏幕物理尺寸和系统缩放，不可靠。
-
2dppx≈ Retina / HiDPI 屏幕（如 MacBook Pro、iPhone、高分 Windows 笔记本） - 若需兼容老 Android（4.3 及以下），可叠加
-webkit-min-device-pixel-ratio: 2，但必须和标准写法用逗号分隔，形成复合媒体查询 - 注意：CSS 中的
@media查询也应统一用min-resolution: 2dppx，保持逻辑一致
link标签加载高清样式表的典型写法
把高清样式单独抽成一个 CSS 文件（比如 style-hd.css），然后用 按条件加载：
<link rel="stylesheet" href="style.css"><link rel="stylesheet" href="style-hd.css" media="(min-resolution: 2dppx)">
这样普通屏只下载并解析 style.css，Retina 屏会额外加载 style-hd.css（且两个文件并行下载，无阻塞）。
- 确保
style-hd.css里只覆盖需要高清适配的部分（如background-image换 @2x 图、border微调），不要重复定义基础样式 - 不要用
rel="preload"提前拉取style-hd.css，媒体查询不生效时它仍会下载，白耗带宽 - 如果用
rel="stylesheet" disabled+ JS 动态启用，反而破坏浏览器预加载逻辑，得不偿失
为什么不能只靠CSS里的@media重写图片？
单纯在主样式表里写 @media (-webkit-min-device-pixel-ratio: 2) { .logo { background: url(logo@2x.png); } } 确实能切换图片，但存在关键缺陷：普通屏浏览器仍会下载 logo@2x.png（只要该规则被解析到，即使媒体查询不匹配）。
而用独立 加载高清样式表，浏览器会真正按媒体查询结果决定是否发起请求——不匹配时，style-hd.css 根本不会发出 HTTP 请求。
- 这对移动端尤其重要：避免在 4G 网络下为非 Retina 设备多下几 MB 的高清资源
- 如果你的高清样式只改了几个
background-image，其实更适合用image-set()函数（但兼容性差，iOS Safari 16+ 才稳定支持） - 注意：CSS 中的
src: url(...)在@font-face里同样受此影响，高清字体也建议分离加载
实际部署时容易漏掉的细节
最常被忽略的是高清样式表里的路径引用——比如 style-hd.css 里写 background: url(img/icon@2x.png)，这个相对路径是相对于 style-hd.css 文件位置的，不是 HTML 页面位置。一旦 CSS 文件放在子目录，图片路径就容易 404。
- 用 Webpack/Vite 构建时，确保
url()资源被正确解析并复制，否则开发环境正常、上线后图片失效 - 服务端开启 HTTP/2 后，多个小 CSS 文件并行加载的开销变小，分离加载更划算；HTTP/1.1 下可权衡是否合并
- 不要在
上加onload或监听load事件来“确认高清样式已生效”，媒体查询匹配是渲染引擎级行为，JS 无法可靠感知
真正要盯住的，是高清样式表里所有资源的路径正确性，以及它是否真的只在需要时才被浏览器请求——用 DevTools 的 Network 面板过滤 css，切到设备模拟器看请求列表，比任何文档都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
