响应式网页设计不保证兼容性，IE8及以下不支持media query；现代浏览器无需前缀，IE10/11需-ms-前缀处理flex/grid，Android 4.3/iOS 8需-webkit-处理transform；autoprefixer须显式配置browserslist目标范围。
响应式网页设计本身不保证兼容性，media query 是 CSS3 特性，老版本 IE（如 IE8 及以下）根本不识别；浏览器前缀不是“加了就兼容”，而是针对特定旧版引擎的临时补丁，盲目堆砌反而引发冲突。
哪些浏览器需要前缀，加在哪儿？
现代浏览器（Chrome 120+、Firefox 115+、Safari 16.4+、Edge 115+）已基本无需前缀。真正需要手动加前缀的是：
-
flexbox：IE10 需要-ms-flexbox，但必须配合display: -ms-flexbox，且不支持gap -
grid：IE10/11 用-ms-grid，语法完全不同（无grid-template-areas，靠-ms-grid-column手动定位） -
transform/transition：Android 4.3 WebView、iOS 8 Safari 需要-webkit-transform
注意：@media 规则本身不需要前缀——但其中的特性（比如 min-width）在 IE8 及以下根本无效，连解析都不做。
media query 兼容性的真实底线
IE9+ 支持标准 @media 查询；IE8 及以下完全忽略，包括 @media screen and (max-width: 768px) 这种写法。不能指望它“降级显示”。可行方案只有：
立即学习“前端免费学习笔记（深入）”；
- 用条件注释 + 单独 IE8 CSS 文件：
- 避免在 IE8 中启用响应式布局，改用固定宽度 + 横向滚动（更实际）
- 用
matchMedia()JS API 在运行时检测，仅对支持的浏览器启用媒体查询逻辑
别试图用 respond.js 这类 polyfill “修复” IE8 的 media query——它只模拟查询触发，不解决盒模型、浮动塌陷等底层问题。
autoprefixer 能不能代替手动判断？
可以，但必须配对设置目标浏览器范围。默认配置（如 last 2 versions）会漏掉仍在使用的 Android 4.4 系统 WebView 或某些国产双核浏览器内核。推荐显式声明：
/* package.json 中 browserslist 字段 */ "browserslist": [ "Chrome >= 49", "Firefox >= 45", "iOS >= 9.3", "Android >= 4.4", "Explorer >= 10" ]
这样 autoprefixer 才会给 flex 加 -ms-，给 transform 加 -webkit-，而不会为 Chrome 100+ 多余添加。
最常被忽略的一点：CSS 自定义属性（--primary-color）没有前缀方案，IE 完全不支持；如果用它驱动响应式主题切换，必须准备 fallback 值或 JS 注入逻辑。
