响应式网页设计不保证兼容性，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) 这种写法。不能指望它“降级显示”。可行方案只有：
立即学习“前端免费学习笔记（深入）”；
