media属性需用标准媒体特性（如width、min-width）且浏览器初始渲染前可判断，避免calc()、JS变量或不支持语法，否则退化为all；正确写法如media="screen and (min-width: 768px)"。
media属性怎么写才真正生效
很多人的 <link> 里写了 media="screen and (min-width: 768px)"，但页面一打开就全加载了——根本没按需。关键不是写对了媒体查询，而是浏览器是否「初始渲染前就能判断」。
浏览器在解析 HTML 时，会根据 media 属性的值决定是否阻塞 CSS 解析和渲染。如果值是动态的（比如 media="(max-width: calc(100vw - 1px))"）、含 JS 变量、或用了不被支持的语法（如 hover 在 iOS Safari 早期版本），就会退化为 media="all"，强制加载。
- 只用标准媒体特性：
width、min-width、max-width、resolution、orientation - 避免在
media中使用calc()、var(--x)或 JS 注入的值 - 测试真实设备：iOS Safari 对
device-width和width的行为不一致，优先用width - 示例正确写法：
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1023px)">
link[rel=preload] + onload 动态加载高分辨率CSS
想给 Retina 屏单独加载 @2x 样式？别用 JS 检测 window.devicePixelRatio 后再 appendChild，那样会触发 FOUC 且破坏 CSS 加载优先级。应该用 <link rel="preload"> 提前声明资源，再由 onload 触发启用。
-
preload不会应用样式，只是提前拉取；onload回调里把rel改成stylesheet才真正启用 - 必须加
as="style"，否则 Chrome 不会提升优先级 - 移动端 WebKit（Safari）不支持
link.onload，得 fallback 到addEventListener('load', ...) - 示例：
<link rel="preload" as="style" href="hd.css" onload="this.rel='stylesheet'">
用思维组织CSS文件结构CSS 不像图片能直接响应式切换，但你可以模仿 <picture></picture> 的语义逻辑：一份基础样式（base.css）兜底，再按设备能力分层叠加。别把所有分辨率规则塞进一个文件里用 @media 堆砌。
立即学习“前端免费学习笔记（深入）”；
- 基础层（必载）：
base.css，含重置、字体、排版、通用组件，media="all"
- 增强层（按需）：
touch.css（针对 pointer: coarse）、hd.css（resolution >= 2dppx）、landscape.css（orientation: landscape）
- 注意
resolution 的兼容性：Firefox 用 dppx，Chrome/Safari 也支持，但 IE 完全不支持，别依赖它做关键布局
- 不要在
base.css 里写 @media (min-resolution: 2dppx) { ... }，这样即使低分屏也会解析整段规则，浪费内存
HTTP/2 下要不要拆CSS文件
很多人以为 HTTP/2 多路复用就不用管文件数量了，结果发现首屏仍卡顿——问题出在「关键 CSS 路径过长」。即使 HTTP/2 并行传输快，浏览器仍要等全部 CSS 字节收完才构建 CSSOM。
- 把首屏必需样式内联进
<style></style>），其余非关键 CSS 用 media 或 preload 异步加载
- 拆分后每个 CSS 文件体积建议 ≤ 10KB（gzip 后），太大依然影响解析速度
- 服务端若支持 HTTP/2 Server Push，慎用：现代浏览器已普遍禁用或忽略它，反而增加服务器负担
- 验证是否真按需：用 Chrome DevTools → Network → Filter 输入
css，看不同设备模拟下哪些请求没发出
实际落地时最常被忽略的是：CSS 媒体查询的匹配发生在 HTML 解析阶段，而 window.matchMedia() 是运行时检测。前者决定“下载不下载”，后者只决定“用不用”。这两个动作不在同一时机，混用就会导致白屏或样式错乱。
CSS 不像图片能直接响应式切换，但你可以模仿 <picture></picture> 的语义逻辑：一份基础样式（base.css）兜底，再按设备能力分层叠加。别把所有分辨率规则塞进一个文件里用 @media 堆砌。
立即学习“前端免费学习笔记（深入）”；
- 基础层（必载）：
base.css，含重置、字体、排版、通用组件，media="all" - 增强层（按需）：
touch.css（针对 pointer: coarse）、hd.css（resolution >= 2dppx）、landscape.css（orientation: landscape） - 注意
resolution的兼容性：Firefox 用dppx，Chrome/Safari 也支持，但 IE 完全不支持，别依赖它做关键布局 - 不要在
base.css里写@media (min-resolution: 2dppx) { ... }，这样即使低分屏也会解析整段规则，浪费内存
HTTP/2 下要不要拆CSS文件
很多人以为 HTTP/2 多路复用就不用管文件数量了，结果发现首屏仍卡顿——问题出在「关键 CSS 路径过长」。即使 HTTP/2 并行传输快，浏览器仍要等全部 CSS 字节收完才构建 CSSOM。
- 把首屏必需样式内联进
（<style></style>），其余非关键 CSS 用media或preload异步加载 - 拆分后每个 CSS 文件体积建议 ≤ 10KB（gzip 后），太大依然影响解析速度
- 服务端若支持 HTTP/2 Server Push，慎用：现代浏览器已普遍禁用或忽略它，反而增加服务器负担
- 验证是否真按需：用 Chrome DevTools → Network → Filter 输入
css，看不同设备模拟下哪些请求没发出
实际落地时最常被忽略的是：CSS 媒体查询的匹配发生在 HTML 解析阶段，而 window.matchMedia() 是运行时检测。前者决定“下载不下载”，后者只决定“用不用”。这两个动作不在同一时机，混用就会导致白屏或样式错乱。
