媒体查询本身不减少首屏体积，反而可能因加载时机失控导致fouc或白屏；必须配合内联关键css和js激活逻辑，否则media="only x"仅将阻塞转为“假装不阻塞”。
媒体查询本身不减少首屏体积，反而可能因加载时机失控导致 FOUC 或白屏——必须配合内联关键 CSS 和 JS 激活逻辑，否则 media="only x" 只是把阻塞换成了“假装不阻塞”。
为什么 media 属性不能单独用作拆分手段
浏览器对 rel="stylesheet" 的处理规则很明确：只要 media 值不是浏览器当前不匹配的类型（比如 print），它仍会阻塞渲染。而 media="only x" 这种非法值，浏览器会直接忽略 media 判断，退化为 media="all"，照样阻塞。
- 常见错误写法：
<link rel="stylesheet" href="non-critical.css" media="only x">—— 实际在 Chrome/Firefox 中仍阻塞解析 - 真正有效的“不阻塞”写法只有两种：
rel="preload"（需指定as="style"）或 JS 动态创建link并设media后再插入 - 媒体查询用于拆分的合理场景，是构建时按设备特性产出不同 CSS 文件（如
mobile.css、desktop.css），再由服务端或客户端路由决定加载哪个，而非靠media属性让浏览器自动筛选
如何用 @media 规则 + 构建工具做有效拆分
构建阶段利用 PostCSS 插件（如 postcss-media-minmax 或自定义插件）提取带特定媒体条件的规则，输出多个目标文件，比运行时靠 media 属性更可控。
- 例如将所有
@media (min-width: 1024px)内的样式抽到desktop.css，其余保留在base.css - Vite 用户可在
vite.config.ts中用build.rollupOptions.output.manualChunks按文件路径匹配拆包：pages/home.css→home-styles.css - Webpack 需配合
mini-css-extract-plugin的chunkFilename和splitChunks.cacheGroups，按/@media/正则识别并分离 - 注意：不要用原生
@import做媒体拆分，它会触发额外请求且无法被 PurgeCSS 分析，体积反而增加 10%–30%
必须搭配内联关键 CSS，否则白屏风险极高
即使拆出了 mobile.css 和 desktop.css，如果首屏 HTML 里没内联导航栏、标题、首屏卡片容器这些样式，用户打开页面就会闪白、抖动或内容错位。
- 关键 CSS 必须控制在 10–15KB（gzip 后），超出仍会延迟首屏绘制
- 推荐用
criticalCLI 工具生成：critical https://yoursite.com --base dist/ --html --inline --dimensions 375x667 - Vite 用户可集成
vite-plugin-critical，在构建时自动注入；Webpack 推荐html-webpack-plugin+critical插件组合 - 内联后，剩余 CSS 必须用 JS 控制激活时机：
const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'non-critical.css'; link.media = 'print'; document.head.appendChild(link); link.onload = () => link.media = 'all';
最容易被忽略的一点：媒体查询拆分的价值不在“多几个文件”，而在“让构建流程感知样式使用上下文”。一旦脱离构建时分析（比如只靠 HTML 里的 media 属性硬切），就退化成不可控的网络竞态，首屏稳定性立刻崩塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
