必须双重验证UA正则与全局对象：匹配/UCBrowser/\d+.\d+/i或/MQQBrowser/\d+.\d+/i，且typeof window.ucweb==='object'或window.mqq==='object'为真，再执行降级逻辑。
现代CSS特性本身不能“解决”移动端奇葩分辨率适配痛点，反而在UC、QQ等旧版浏览器中会直接失效甚至引发样式丢失——必须先识别环境、再分层降级，否则@container、:has()、@layer写得再漂亮也白搭。
怎么快速判断是否运行在UC/QQ旧内核中
仅靠navigator.userAgent会误判：UC常伪造Chrome/120.0.0.0，QQ可能伪装成Safari/605.1.15。必须双重验证：
- 正则匹配UA：检查
/UCBrowser\/\d+\.\d+/i或/MQQBrowser\/\d+\.\d+/i - 全局对象检测：
typeof window.ucweb === 'object'（UC）或typeof window.mqq === 'object'（QQ） - 封装成函数后加守卫：
if (isUcOrQqOld()) { loadLegacyCSS(); }，避免非目标环境执行冗余逻辑
容器查询（@container）在低端机上怎么不崩
@container在UC/QQ中会被静默丢弃，container-type声明完全无效。不能加前缀，必须回退到JS+CSS组合方案：
- 用
ResizeObserver监听关键容器宽度变化（注意：UC旧版不支持，需fallback为setTimeout轮询offsetWidth） - 根据宽度手动切换类名：
el.classList.toggle('cq-sm', width ，再用.cq-sm .title { font-size: 14px; }写样式 - CMS类系统可服务端预判容器宽，直接注入对应class，规避客户端JS依赖
:has()选择器失效时如何保持语义和可维护性
.card:has(img)这类规则在UC/QQ中整条被跳过，且无CSS polyfill可用。替代方式要兼顾结构清晰与运行时可控：
- JS标记法：遍历
card.querySelectorAll('img').length && card.classList.add('has-img')，再用.card.has-img写样式 - 结构约束法：模板层强制约定含图片的卡片带
.card--with-img类，由组件控制而非样式推导 - 表单场景慎用
:has(:invalid)：UC下整个规则块失效，导致无视觉反馈；改用input事件监听+动态加.is-invalid
@layer看似安全实则埋雷，怎么避开权重陷阱
@layer不会报错，但UC/QQ会忽略它，后续CSS按原始顺序级联——你写的@layer base { .btn {} }和@layer components { .btn {} }在降级后变成无序覆盖，极易破坏样式优先级。
- 构建时用PostCSS插件（如
postcss-layer）将@layer展开为命名空间class：@layer components { .button {} }→.layer-components-button {} - 禁止混用：生产CSS中要么全部规则显式归入某
@layer，要么全部不用；否则降级后顺序混乱不可控 - 若项目已上线
@layer，必须在isUcOrQqOld()分支中加载一份剥离@layer的CSS副本
最易被忽略的是：这些降级逻辑不能只写在CSS里，必须和viewport配置、DPR处理、dvh fallback形成闭环——比如横屏时@container失效叠加100vh截断，问题会指数级放大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
