必须用@supports(display:grid)and(grid-template-columns:1fr)精准检测grid兼容性，降级样式写在块外并兼容ie11，android4.4需ua+dom探测双保险，禁用polyfill改用两套样式手动降级。
@supports (display: grid) and (grid-template-columns: 1fr) 必须加模板约束
只写 @supports (display: grid) 会把 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器放进来——它们识别 display: grid，但不支持 gap、fr 或 auto-fit，结果 Grid 渲染失败，子项堆叠或溢出。必须加核心模板语法验证：@supports (display: grid) and (grid-template-columns: 1fr) 才能筛掉 IE 全系、Safari ≤10.1、Android 4.4 WebView 等真实不兼容环境。
别用 @supports (gap: 1rem)：Firefox 63 以前不支持，反而误拦大量现代浏览器；也别用 @supports (justify-content: start)，旧 Safari 在 Grid 上根本不解析该值，getComputedStyle 返回的仍是 stretch。
降级样式必须写在 @supports 块外层且语法兼容
IE11 完全忽略 @supports 规则，Safari ≤9 也跳过它——这意味着你写的整个 @supports 块都不会执行。降级样式（如 display: flex 或 float: left）必须写在块外，且属性值得是老浏览器能理解的：
-
gap失效时，改用子项margin+box-sizing: border-box模拟，例如.item { margin-right: 1rem; }配合.item:nth-child(3n) { margin-right: 0; } - 避免在降级分支里用
flex-wrap: wrap后又依赖justify-content控制最后一行位置——Flex 多行下该属性无效，可用::after { content: ""; flex: auto; }占位模拟 - IE9 及以下不支持
display: flex，得退回float+ 伪元素清除浮动：.grid::after { content: ""; display: block; clear: both; }，IE6/7 还需加zoom: 1
Android 4.4 WebView 需要 UA + 特性探测双保险
@supports 在 Android 4.4（Chromium 30 内核）中完全不被识别，连检测块都会被静默丢弃。JS 检测不能只靠 CSS.supports('display', 'grid')，因为该 API 本身就不支持；也不能用 getComputedStyle(el).display === 'grid'，返回值永远是 block。
稳妥做法是组合判断：
- UA 字符串匹配：
/(Android\s+4\.4|Chrome\/30)/.test(navigator.userAgent) - 临时元素探测：创建一个带
style.display = 'grid'的div，插入 DOM 后检查getComputedStyle(div).display是否仍为grid（Android 4.4 会返回block） - 匹配成功后，给
添加class="no-grid"，用 CSS 规则覆盖 Grid 样式，启用内联 Flex 或 float 布局
别碰 css-grid-polyfill，它会让滚动和输入卡成幻灯片
css-grid-polyfill 已停止维护，它通过 JS 遍历 DOM、计算位置、动态插入 position: absolute 元素模拟 Grid 行为。在 Android 4.4 这类低性能 WebView 中：
- 子元素超 10 个时，列表滚动帧率低于 12fps
- 输入框聚焦时键盘弹出延迟明显，表单校验反馈滞后
- 注入的节点破坏原生事件流，
focusin、touchstart监听失效 - Webpack/Vite 构建时触发 “eval is not supported” 报错，因 Android 4.4 不支持
Function构造函数执行字符串代码
真正可行的是两套样式 + 条件 class 切换，放弃“一套代码跑所有”的幻想。复杂点不在写两套样式，而在 gap、subgrid、auto-fit 这些特性降级时无法自动推导，必须手动对齐轨道数、重写间距逻辑、显式控制行列跨度——这些细节容易被忽略，但一漏就整页塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
