如何使用CSS媒体查询实现响应式布局

@media写了但没生效的最常见原因是缺少viewport标签，导致移动端以980px宽度渲染，使max-width等条件无法触发；其他高频问题包括优先级被覆盖、width与device-width混用、断点顺序错误、未采用移动优先的min-width写法及未适配真实用户屏幕数据。

@media 规则不是“加了就自动适配”，它只在条件匹配时覆盖样式，且优先级、断点顺序、视口设置出错都会导致失效。

为什么 @media 写了但没生效？

最常见原因是缺少 <meta name="viewport" content="width=device-width, initial-scale=1">。没有这行，移动端浏览器会以桌面宽度（通常是980px）渲染页面，@media (max-width: 768px) 永远不触发。

其他高频问题包括：

• @media 规则写在了被更具体选择器覆盖的位置（比如 .header .logo { font-size: 24px; } 比 @media (max-width: 768px) { .logo { font-size: 16px; } } 优先级高）
• 断点用了 device-width 而不是 width —— 前者是设备物理像素宽度，后者才是 CSS 像素构成的视口宽度，响应式必须用 width
• 多个 @media 条件重叠且顺序反了，比如先写 @media (max-width: 768px)，再写 @media (min-width: 480px)，后者会覆盖前者部分范围

min-width 和 max-width 怎么选？

推荐统一用 min-width，采用“移动优先”写法：基础样式默认适配小屏，再用 @media (min-width: 768px) 逐步增强中大屏表现。

这样做的好处是：

立即学习“前端免费学习笔记（深入）”；

• 避免重复覆盖（不用在每个断点里都写 display: block 这类基础值）
• 减少 CSS 体积（小屏设备只下载必要样式）
• 逻辑更线性：从窄到宽，逐层叠加

如果非要用 max-width，务必注意断点值要严格递减，例如：@media (max-width: 1199px) → @media (max-width: 767px) → @media (max-width: 479px)，否则中间区间会漏掉。

断点值该设多少？别硬背标准值

所谓 “768px 是平板断点” 只是经验参考，实际应看真实用户数据。Chrome DevTools 的 Device Mode 或 Analytics 中的屏幕尺寸分布才是依据。

更稳妥的做法是：

• 先写内容，等布局撑开或挤压明显时，记下此时宽度（比如导航栏文字开始换行，记下这个 width 值）
• 用这个值 +1px 作为断点，例如文字在 374px 换行，就设 @media (min-width: 375px)
• 避免用太多断点——3–4 个足够覆盖绝大多数场景；每多一个，维护成本和测试负担都翻倍

媒体查询能监听哪些真实有用的特性？

除了 width，这几个在实际项目中真有用：

• orientation: landscape：横屏时隐藏侧边栏、放大地图容器
• prefers-reduced-motion: reduce：对动画做降级，比如把 transform: scale(1.1) 改成 opacity: 0.9
• prefers-color-scheme: dark：配合系统深色模式切换主题色（注意它不触发重绘，仅 CSS 变量可响应）
• hover 媒体特性：@media (hover: hover) 可区分触屏与鼠标设备，用来控制下拉菜单触发方式

慎用 device-pixel-ratio 和 resolution —— 它们在不同浏览器行为不一致，且现代高清屏适配更多靠 srcset 和矢量图形解决。

真正容易被忽略的是：媒体查询本身不“响应”，它只是一次性匹配。页面缩放、旋转、动态改字体大小都不会重新触发。需要实时响应的行为（比如根据滚动位置切换导航样式），得用 JavaScript 配合 window.matchMedia() 监听，而不是只靠纯 CSS。