@import 在媒体查询内不生效是因为它必须位于样式表顶部，正确写法是将媒体条件直接附加在 @import 语句后，如 @import "high-dpi.css" only screen and (-webkit-min-device-pixel-ratio: 2);
为什么 @import 在媒体查询里不生效
因为 @import 规则必须出现在样式表最顶部，不能嵌套在 @media 块内部。你写成这样会直接被浏览器忽略：
@media (-webkit-min-device-pixel-ratio: 2) {
@import "high-dpi.css"; /* ❌ 语法错误，无效 */
}真正起作用的是把媒体查询逻辑移到 @import 自身的条件参数里。
-
@import支持带媒体查询条件，写在 URL 后面，用分号隔开 - 必须用双引号或单引号包裹路径，否则部分浏览器解析失败
- 多个条件用 and 连接，不要用逗号
怎么用 @import 正确加载高清屏 CSS
直接在主 CSS 文件开头写：
@import "high-dpi.css" only screen and (-webkit-min-device-pixel-ratio: 2); @import "high-dpi.css" only screen and (min-resolution: 192dpi);
这两行会分别匹配 WebKit 内核（如 Safari、旧版 Chrome）和标准 min-resolution 的设备。注意：
立即学习“前端免费学习笔记（深入）”；
- 不同浏览器对
device-pixel-ratio和resolution的支持程度不同，建议两条都写 -
only screen是必需的，漏掉会导致某些浏览器误判为 all 媒体类型而无条件加载 - 路径是相对于当前 CSS 文件的位置，不是 HTML 页面
min-resolution 的单位和常见取值误区
min-resolution: 192dpi 不等于 2x 屏幕——它取决于物理像素密度，不是缩放比例。Windows 缩放设为 125% 的 1080p 屏，实际可能只触发 120dpi，而非预期的 2x。
-
1x屏通常对应96dpi（Windows）或72dpi（macOS 早期），但现代 macOS Retina 默认按144dpi渲染 -
2x屏常见于192dpi（Windows）或227dpi（macOS Retina）以上，但不能硬编码只写192dpi - 更稳妥的方式是补一句
min-resolution: 2dppx（dots per px），它和device-pixel-ratio语义一致，且被现代浏览器广泛支持
比 @import 更可靠的做法：用 <link> + media
HTML 中直接引入，可控性更强，还能利用预加载和并行下载：
<link rel="stylesheet" href="high-dpi.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"> <link rel="stylesheet" href="high-dpi.css" media="only screen and (min-resolution: 192dpi)">
优势很明显：
- 不会受 CSS 文件加载顺序或
@import的阻塞链影响 - 浏览器能提前发现资源，启动网络请求
- 避免因主 CSS 解析失败导致高清样式完全不加载
- 方便配合构建工具做条件打包（比如只在 prod 环境注入）
真正容易被忽略的是：DPI 判断只是起点，background-image 换图、font-size 微调、border 宽度重设这些后续适配，才是让高清屏真正“清晰起来”的关键动作。
