media属性必须用静态可判定的条件，含calc()、CSS变量或JS注入值会退化为all；仅支持width、min-width、max-width、resolution、orientation、pointer等标准媒体特性，推荐用width而非device-width。
media 属性必须用静态可判定的条件
浏览器在 HTML 解析阶段就决定是否加载某份 CSS，media 值若含动态表达式（比如 calc()、CSS 变量、JS 注入值），会直接退化为 media="all"，导致“按需”失效。真实设备上常见误写：media="(max-width: calc(100vw - 1px))" 或 media="(min-resolution: var(--dpr))" —— 这些全都不生效。
只允许使用以下标准媒体特性：
-
width、min-width、max-width（推荐用width，iOS Safari 对device-width解析不稳定） -
resolution（注意：Firefox 用dppx，Chrome/Safari 支持但 IE 完全不支持） -
orientation、pointer（如pointer: coarse识别触屏）
用 link[rel=preload] + onload 加载高清 CSS
想给 Retina 屏单独加载 hd.css，别用 JS 检测 window.devicePixelRatio 后再 appendChild，那样会 FOUC（闪白）且破坏资源优先级。
正确做法是提前声明资源并延迟启用：
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" as="style" href="hd.css" onload="this.rel='stylesheet'">
注意两点：
- 必须带
as="style"，否则 Chrome 不提升加载优先级 - iOS Safari 不支持
link.onload，要 fallback：<link rel="preload" as="style" href="hd.css" onload="this.rel='stylesheet'"><script>document.querySelector('link[href=\"hd.css\"]').addEventListener('load', e => e.target.rel = 'stylesheet');
基础层 + 增强层的 CSS 文件组织结构
别把所有分辨率规则塞进一个文件里靠 @media 堆砌。模仿 <picture> 思维分层加载：
- 基础层（必载）：
base.css，含重置、字体、通用组件，media="all" - 增强层（按需）：
touch.css（pointer: coarse）、landscape.css（orientation: landscape）、hd.css（min-resolution: 2dppx） - 避免在
base.css里写@media (min-resolution: 2dppx)—— 低分屏也会解析整段规则，浪费内存和解析时间
断点值别硬套设计稿物理像素
设计稿是 750px 宽、DPR=2 的图，不代表你该写 media="(min-width: 750px)"。CSS 视口单位是逻辑像素，iPhone 13 Pro 的逻辑宽度是 414px，不是 1170px。
实际断点建议取主流设备逻辑宽度区间：
-
@media screen and (max-width: 320px)→ 老旧小屏（iPhone 5） -
@media screen and (min-width: 321px) and (max-width: 375px)→ iPhone SE / 8 -
@media screen and (min-width: 376px) and (max-width: 414px)→ iPhone X / 13 Pro -
@media screen and (min-width: 415px)→ 平板、折叠屏展开态
最关键的是：别用 max-height 做断点——地址栏收起/展开会让 window.innerHeight 突变，媒体查询误触发。
