的media属性必须写全“媒体类型 and (媒体特性)”格式，如screen and (max-width: 768px)，否则浏览器（尤其旧版safari）会跳过请求；不匹配时完全不发起http请求，而非下载后不应用。
直接用 <link rel="stylesheet"> 的 media 属性就能按屏幕尺寸加载不同 CSS 文件，但必须写对语法，否则浏览器根本不会发请求——不是“不生效”，是压根没加载。
media 属性怎么写才被浏览器识别
常见错误是漏掉媒体类型前缀或括号不全。浏览器（尤其是旧版 Safari）只认完整语法：screen and (max-width: 768px)。
-
media="max-width: 768px"❌ 缺screen and，Safari 会跳过整个<link> -
media="(min-width: 768px)"❌ 同样无效，必须带媒体类型 -
media="screen and (min-width: 480px) and (max-width: 768px)"✅ 平板区间，精确匹配 -
media="screen and (min-width: 1024px), screen and (min-resolution: 2dppx)"✅ 多条件“或”关系，用英文逗号+空格分隔
为什么有些 CSS 文件在 Network 面板里完全看不到
因为 <link media=""> 是资源级拦截：不匹配时，浏览器连 HTTP 请求都不会发——不是下载后隐藏，是彻底跳过。
- 在桌面模式下检查 Chrome DevTools 的 Network 面板，
mobile.css对应的请求不应出现 - 切到 iPhone SE 模拟（375px 宽），它应该立刻出现在 Network 列表中
- 如果始终不出现，先确认
href路径是否 404/403，media属性不会掩盖路径错误 - 注意：
rel="preload"会忽略media条件，预加载不走这个逻辑
什么时候该拆成多个 CSS 文件，而不是只用 @media
拆文件有意义的前提是：某套样式在另一类设备上**完全不需要**，且体积显著（比如 >30KB）。否则不如写在一个文件里用 @media 控制。
- 适合拆：纯移动端组件库（
mobile-components.css）、打印专用样式（print.css）、高分辨率图标替换（retina-icons.css） - 不适合拆：只是按钮间距、字体大小微调——多一次 HTTP 请求反而拖慢首屏
- 兼容性注意：IE9+ 支持
media属性，但不支持窗口缩放时动态切换已加载的<link> - 性能影响：对弱网或低端设备，减少请求数比节省几 KB 更关键
真正容易被忽略的是断点值本身——它反映的是视口宽度（viewport width），不是设备物理分辨率；缩放、横竖屏、<meta name="viewport"> 设置都会影响匹配结果。别只靠缩放窗口测，得真用设备模拟器或真实设备验证加载行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
