响应式网站的优雅降级本质是将媒体查询作为现代布局起点，全局样式保障IE8等老旧浏览器基础可用，媒体查询内仅增强非必需效果，并配合后备值、传统布局和polyfill兜底。
响应式网站用媒体查询做优雅降级，本质不是靠媒体查询本身兼容老旧浏览器，而是把媒体查询作为“现代布局的起点”，再配合其他手段兜底老环境。因为IE9及更早版本根本不支持媒体查询，所以不能指望它来触发降级逻辑——真正起作用的是CSS写法、后备值、前缀和结构妥协。
媒体查询只在现代浏览器生效，老浏览器自动忽略
IE8及以下完全不识别 @media 规则，整段样式会被跳过。这意味着：你写的 @media (max-width: 768px) { ... } 在IE8里就像不存在一样，浏览器只会应用外面的全局样式。这反而是优雅降级的基础——只要全局样式是可用的，老用户就能看到内容。
- 把基础布局（如流式宽度、
display: block堆叠）写在媒体查询外，确保IE8也能渲染主体结构 - 媒体查询内只放增强型样式：Flexbox换行、Grid网格、动画、圆角等非必需效果
- 避免在媒体查询外依赖现代特性，比如不要用
display: flex作为默认布局
用CSS后备值替代缺失特性
媒体查询常和CSS新特性搭配使用，而老浏览器对这些特性“视而不见”。这时要主动提供兼容性更强的前置声明，让旧引擎取第一个可识别的值。
- 颜色变量降级：
color: #333; color: var(--text-color);—— IE11不支持CSS变量，但会用前面的十六进制色 - 字体堆叠降级：
font-family: "Inter", -apple-system, sans-serif;—— 老系统找不到Inter就顺延到系统默认无衬线体 - 圆角+边框降级：
border-radius: 4px; border: 1px solid #eee;—— 即使不支持圆角，边框仍能清晰分隔区块
为关键布局准备无媒体查询的备用方案
当目标必须覆盖IE9–IE11时，仅靠媒体查询远远不够。需要主动引入老式但可靠的布局机制，与响应式逻辑并存。
- 用
float或table-cell实现多栏布局，并用媒体查询在现代浏览器中覆盖为flex或grid - 图片统一加
max-width: 100%; height: auto;，不依赖picture或srcset（IE不支持） - 导航菜单默认展开，用媒体查询在小屏收起；老浏览器看到的是始终展开的可用状态，而非空白或错位
配合viewport和polyfill补全基础能力
媒体查询要生效，前提是浏览器能正确解析视口。老旧Android或IE需额外保障。
- 强制设置
<meta name="viewport" content="width=device-width, initial-scale=1">，哪怕部分老内核支持有限，也能改善缩放行为 - 对IE9–11引入
matchMediapolyfill，让JS能监听媒体查询变化（用于动态加载/切换） - 用
respond.js（已归档但仍有项目沿用）或现代替代方案，为IE8补充媒体查询支持（仅限min/max-width）
