@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 和矢量图形解决。
window.matchMedia() 监听，而不是只靠纯 CSS。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
