核心问题是加载方式和资源组织不合理，而非@media本身；应改用按需加载、避免@import串行引入、内联首屏关键规则，并拆分css减少阻塞。
移动端响应式 CSS 加载慢，核心问题不是@media本身，而是加载方式和资源组织不合理。 单纯写一堆媒体查询不会拖慢首屏，但把所有断点样式塞进一个大文件、用@import串行引入、或让非关键样式阻塞渲染，就会明显卡住手机用户。
拆分 CSS 并用 link media 按需加载
浏览器会并行下载所有 <link rel="stylesheet">，但只有匹配 media 条件时才解析和应用。这能避免桌面端规则污染移动端的 CSSOM。
- 基础样式（移动端必需）放进
base.css，不加media属性，确保首屏立即生效 - 平板专属样式用
<link href="tablet.css" media="screen and (min-width: 768px)"> - 桌面端样式用
<link href="desktop.css" media="screen and (min-width: 1200px)"> - 写错
media值（比如漏掉screen and或拼成not all）会导致样式完全不生效，DevTools 的 Elements 面板里查不到对应规则
避免 @import，尤其在 CSS 文件里嵌套
@import 强制串行加载：浏览器必须等前一个 CSS 解析完、发现 @import、再发起新请求、等返回，才能继续。哪怕那个被导入的文件只在 min-width: 1200px 下才需要，也会拖慢所有设备的首屏。
- 检查线上 CSS 是否含
@import：打开 DevTools → Network → 筛选 CSS，看请求是否呈明显瀑布流 - 旧版 CMS 或 WeUI 主题常自动生成
@import，需手动覆盖或禁用相关配置 - 替代方案是全部改用 HTML 中的
<link media>，或构建时用 PostCSS/Webpack 提取条件样式
内联首屏关键响应式规则，其余异步加载
首屏布局依赖的媒体查询（比如移动端折叠导航、flex-direction: column 断点）必须第一时间可用，否则出现 FOUC 或布局跳变。
- 把这部分规则抽出来，内联进 HTML 的
<style></style>标签，不要等外部 CSS - 非首屏响应式样式（如“查看更多”展开区、页脚多列布局）用
<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载 - 别用 JS 动态插入
<link media>：时机难控，resize 时容易重复加载或漏加载 -
sizes和srcset必须配合使用，否则loading="lazy"在移动端可能选错图——比如本该加载480w的图，却拿了1200w的版本
真正容易被忽略的是：媒体查询越多、嵌套越深（比如 @media (prefers-color-scheme: dark) { @media (hover: hover) { ... } }），窗口 resize 或设备旋转时重计算开销越大；而很多团队只盯着文件体积，忘了运行时样式重匹配的成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
