关键CSS必须覆盖所有目标设备断点，内联时需指定多宽度并验证首屏渲染；非关键CSS用link[media]并行加载；PurgeCSS需解析JS动态类；图片响应式需srcset、sizes与loading="lazy"协同。
关键 CSS 必须覆盖所有目标设备断点，否则首屏渲染就会错乱——不是“够用就行”，而是“全设备首屏都得对”。
内联 critical CSS 时漏掉断点规则，页面在平板上直接错位
只把 @media (max-width: 767px) 的样式内联，结果用户用 iPad（768px）打开，导航栏还收着、字体没放大、网格列数没变——这不是 JS 没跑，是 CSSOM 根本没加载那部分规则。
- 用
criticalCLI 生成时，必须显式指定多宽度：--width 375 --width 768 --width 1200 - 手动检查生成的
<style>块：是否包含@media (min-width: 768px)下的.nav-open .menu、grid-template-columns、font-size等首屏相关声明 - 别漏掉
@font-face和图标类（如.icon-menu），缺失会导致 FOIT 或图标不显示
用 link[media] 加载非关键 CSS，别写 @import
@import 在 CSS 文件里写条件加载，等于告诉浏览器：“等我下完、解析完，再去找下一个”，彻底串行阻塞。而 <link rel="stylesheet" media="..."> 是并行下载、按需解析。
- 正确写法：
<link rel="stylesheet" href="base.css">（移动优先基础） +<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)"> - media 值必须合法：
screen and (min-width: 768px)缺screen and，部分浏览器会忽略；not all则永远不生效 - 打印样式、深色模式 CSS 都适用这套逻辑，但核心布局/字体/按钮等仍应进 base.css 或内联
PurgeCSS 删除未用类时，JS 动态类被误删
扫描静态 HTML 时，.modal--open、.theme-dark 这类靠 JS 添加的类根本不存在 DOM 中，PurgeCSS 默认就把它们连同对应样式一起干掉。
立即学习“前端免费学习笔记（深入）”；
- 构建时传入 JS 入口路径，让 PurgeCSS 能解析
classList.add("modal--open")调用（需配置content选项支持**/*.js） - 或加注释块保留：
/* purgecss start ignore */ .modal--open, .theme-dark { } /* purgecss end ignore */ - 关闭默认提取器（
defaultExtractor）或设rejected: false也行，但会增大输出体积
srcset + sizes + loading="lazy" 必须三者协同
只加 loading="lazy"，浏览器仍可能选错图——比如在手机上懒加载触发后，从 srcset 里拿了 large.jpg，白瞎了懒加载。
-
sizes必须真实反映图片在视口中的宽度，例如：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - fallback
src仍需存在（兼容老浏览器），但现代场景下它基本不被加载 - 背景图响应式懒加载没法靠 HTML 属性实现，得用
IntersectionObserver+ 动态设background-image
最常被跳过的一步：验证内联 CSS 是否真覆盖了所有目标设备下的首屏渲染路径——不是看代码写了哪些 @media，而是用真机或 DevTools Device Mode 切换不同宽度，逐帧检查 layout 是否稳定、文字是否可读、交互元素是否就位。
