合法 media 属性必须写全 screen and (max-width: 768px) 等完整语法，缺 screen and、括号不闭合或省略媒体类型均导致旧版 Safari 跳过整个 <link>，Network 中无请求；仅 print 等预定义类型可单独使用。
必须写全 screen and (max-width: 768px) 这类完整语法，漏掉 screen and 或括号不闭合，旧版 Safari 会直接跳过整个 <link>，连 HTTP 请求都不会发。
media 属性的合法写法有哪些
浏览器只认“媒体类型 + and + 媒体特性”的组合，不能省略任何一部分。常见有效写法包括：
-
screen and (max-width: 768px)✅ 手机小屏（注意是max-width，不是max-device-width） -
screen and (min-width: 769px) and (max-width: 1024px)✅ 平板区间，两端都闭合才精确 -
screen and (min-width: 1025px), screen and (min-resolution: 2dppx)✅ 多条件“或”关系，用英文逗号+空格分隔 -
print✅ 单独使用print是合法的，因为它是预定义媒体类型
以下全是无效写法：
-
max-width: 768px❌ 缺screen and，Safari 忽略 -
(min-width: 480px)❌ 同样缺媒体类型前缀 -
screen and min-width: 768px❌ 括号不全，语法错误
为什么 Network 面板里完全看不到某个 CSS 请求
这不是加载失败，而是浏览器压根没发起请求——media 是资源级拦截，不匹配就跳过整个 <link>。比如你写了 media="screen and (max-width: 320px)"，但当前视口是 375px，那 mobile.css 就不会出现在 Network 列表里。
立即学习“前端免费学习笔记（深入）”；
- 先确认路径是否 404/403：
media不掩盖路径错误，如果href错了，即使匹配也会报错 - 别只靠浏览器缩放窗口测试：缩放会改变 CSS 像素，但不等同于真实设备视口宽度；必须用 DevTools 的设备模拟器（如 iPhone SE）或真机验证
-
rel="preload"会绕过media条件：它始终预加载，不参与媒体查询判断
什么时候该拆成多个 CSS 文件而不是只用 @media
拆文件只有在某套样式在另一类设备上「完全不需要」且体积显著（>30KB）时才有意义。否则多一次 HTTP 请求反而拖慢首屏。
- 适合拆：
print.css（打印专用）、retina-icons.css（仅高 DPR 设备用）、纯移动端组件库（桌面端根本不用） - 不适合拆：只是按钮边距、字体大小微调——这些写进一个文件里用
@media更高效 - IE9+ 支持
media属性，但不支持窗口缩放时动态切换已加载的<link>：缩放后不会重新加载新匹配的样式表
真正容易被忽略的是断点值本身——它反映的是视口宽度（viewport width），不是物理分辨率；<meta name="viewport"> 设置错误、横竖屏切换、甚至系统缩放都会影响匹配结果。
