终端样式应按使用意图而非设备型号设断点，共性CSS变量提至:root仅覆盖差异项，优先用@media而非@container，服务端避免依赖User-Agent判别终端。
用 @media 写终端专属样式时，断点值不是随便填的
不同设备的真实视口宽度和用户行为差异很大，硬写 @media (max-width: 768px) 很可能在 iPad 横屏、折叠屏、甚至高缩放桌面浏览器里失效。
推荐做法是按「使用意图」而非「设备型号」划分断点：
@media (width ：单手拇指操作场景（小屏竖屏，非仅手机）-
@media (width >= 1200px) and (hover: hover)：明确支持悬停且宽屏，适合桌面导航展开逻辑 -
@media (prefers-reduced-motion: reduce)：动画降级，和屏幕尺寸无关但属于终端能力关键分支
别依赖 window.innerWidth 值反推媒体查询——它受缩放、滚动条、地址栏遮挡影响，@media 自身才是真实渲染依据。
CSS 自定义属性 + :root 切换主题时，别在媒体查询里重复定义变量
常见错误是每个 @media 块里都写一遍 --bg-color: #fff;，导致维护成本飙升、变量作用域混乱。
正确方式是把终端共性变量提级到顶层，只覆盖差异项：
:root {
--bg-color: #fff;
--text-size: 1rem;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a; /* 只改这个 */
}
}
@media (min-width: 768px) {
:root {
--text-size: 1.125rem; /* 只改这个 */
}
}
这样既保持变量可预测，又避免嵌套媒体查询时变量被意外覆盖。注意：IE 不支持 :root 中的媒体查询，如需兼容，得用 JS 动态 class 控制。
构建工具中提取终端样式集，postcss-preset-env 的 stage 设置影响输出
用 PostCSS 处理现代 CSS 特性时，stage: 3 会把 @container 转成模拟代码，但 @container 本身依赖容器查询 API，而该 API 在 Safari 16.4+ 才稳定支持——你打包出的“兼容版”可能根本跑不起来。
实际建议：
- 终端样式分离优先用
@media，@container仅用于组件级响应式（如卡片内布局） - 若必须用容器查询，检查构建目标浏览器版本，
postcss-preset-env的targets配置要精确到safari: "16.4" - Webpack/Vite 中提取 CSS 时，别用
mini-css-extract-plugin的默认filename，否则所有终端样式混在一个main.css里，失去“独立样式集”意义
服务端注入终端样式前，User-Agent 解析不可靠
靠服务端解析 User-Agent 字符串来决定加载 mobile.css 还是 desktop.css，会漏掉 iOS 的「请求桌面版网站」用户、Chrome 的设备模拟器、以及所有隐私模式下的 UA 篡改。
更稳的路径是：
- 首屏用内联关键样式（含基础
@media），不依赖终端识别 - JS 加载后读取
window.matchMedia实际匹配结果，再动态link加载细分样式表 - 服务端只做粗粒度分流（如是否为微信内置浏览器），不承担样式决策
真要服务端判别，用 client-hints（如 Sec-CH-UA-Mobile）比 UA 可靠得多，但需要客户端主动发起带 hint 的请求，且旧浏览器不支持。
终端样式从来不是“写几套 CSS”就完事的事——真正麻烦的是边界情况：横竖屏切换时的过渡、缩放后媒体查询重触发时机、还有那些连 matchMedia 都无法准确反映的系统级设置。这些地方一松懈，独立样式集就变成独立 bug 集。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
