响应式网站应拆分CSS并用按需加载，避免@import和JS模拟；结合prefers-*媒体查询适配系统偏好；Critical CSS须覆盖目标设备所有首屏断点样式。
用 media 属性按需加载 CSS 文件
响应式网站常把所有断点样式打包进一个 style.css，但用户只用到其中一小部分（比如手机用户永远用不到 @media (min-width: 1200px) 的规则）。直接加载整张样式表，既浪费带宽又阻塞渲染。
更优做法是拆分 CSS 并用 <link> 的 media 属性做条件加载：
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)"> <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1200px)">
浏览器会下载所有 <link>，但**仅匹配 media 条件时才解析和应用对应 CSS**，不阻塞首屏渲染。注意：不要用 display: none 或 JS 动态插入来“模拟”响应式切换——那仍会延迟关键样式。
-
media值必须是有效媒体查询，写错（如漏掉screen and）会导致样式完全不生效 - 移动端优先时，
base.css应包含所有移动设备必需样式，避免白屏 - 慎用
print等非屏幕媒体类型，现代浏览器可能跳过其下载
避免 @import 在 CSS 中引入响应式模块
@import 会阻塞并串行加载，即使被导入的文件只在某个断点下才需要。例如在 style.css 里写：@import url("desktop-only.css") screen and (min-width: 1200px);，浏览器仍会在解析到该行时暂停、发起请求、等待返回后才继续——这破坏了并行加载优势。
立即学习“前端免费学习笔记（深入）”；
替代方案是彻底移除 CSS 内的 @import，改用 HTML 中的 <link media="...">（如上一节），或构建时通过工具（如 PostCSS、Webpack）将条件样式内联/提取为独立文件。
- 检查已上线 CSS 是否含
@import：用浏览器 DevTools 的 Network 面板看 CSS 请求瀑布流，若出现明显串行延迟，大概率是它导致的 - 某些旧版 CMS 或主题框架会自动生成
@import，需手动覆盖或配置禁用
用 prefers-reduced-motion 和 prefers-color-scheme 按系统偏好精简动画与主题资源
响应式不止看视口宽度，还要适配用户系统设置。比如动画密集的交互动效对部分用户是干扰，深色模式下加载亮色图标毫无意义——这些都属于「不必要的资源」。
用媒体查询配合 prefers-reduced-motion 跳过非必要动画，用 prefers-color-scheme 控制主题相关图片或字体加载：
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}
@media (prefers-color-scheme: dark) {
.icon { background-image: url("icon-dark.svg"); }
}更进一步，可结合 loading="lazy" 和 picture 元素，让深色/浅色图标的加载也受媒体查询控制，避免双份图片都被下载。
- 不要仅靠 JS 检测
matchMedia后再动态加载——CSS 媒体查询由浏览器原生支持，更快更可靠 -
prefers-color-scheme在 Safari 12.1+、Chrome 76+ 支持良好，但旧版本会忽略，需确保默认样式可用
Critical CSS 必须包含所有首屏响应式规则
内联关键 CSS（Critical CSS）能消除渲染阻塞，但如果只提取「桌面端首屏」规则，手机用户打开页面就会看到未样式化的布局（FOUC）或错位——因为关键 CSS 里压根没有 @media (max-width: 480px) 下的样式。
生成 Critical CSS 时，必须针对**目标设备的实际视口尺寸**运行工具（如 Penthouse、critical），或手动合并各断点下的首屏样式块。不能简单地把整个响应式 CSS 全部内联（体积爆炸），也不能只取某一个断点。
- 自动化工具常默认以桌面尺寸抓取，需显式传入
--width 375 --height 667等参数模拟 iPhone SE - 如果使用 CSS-in-JS（如 Emotion），确认其 SSR 输出是否已按媒体查询做了服务端条件渲染，否则客户端首次渲染仍会闪动
- 内联的 Critical CSS 超过 ~14KB 可能触发浏览器额外解析开销，需权衡体积与覆盖率
实际优化中，最易被忽略的是：不同设备不仅需要不同样式，还需要不同资源加载时机和条件。把「响应式」理解成单纯写媒体查询，就错过了加载策略层面的优化空间。
