@media 规则需视口声明才能生效，常见失效原因包括缺viewport元标签、样式覆盖、误用device-width、断点重叠及ie8兼容问题；推荐内容驱动设断点并优先使用css内联@media。
@media 规则不是“加了就自动适配”，它只在条件成立时生效，且样式层叠顺序、断点设置不合理会导致样式覆盖失效或错乱。
为什么 @media 写了但页面没反应
最常见原因是视口未声明，浏览器默认按 980px 渲染，max-width: 768px 永远不触发。
必须在 中添加：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
其他典型问题包括：
-
@media放在外部 CSS 文件末尾，但被前面同名选择器的高优先级规则覆盖 - 用了
device-width而非width：前者是物理屏幕宽度（如 iPhone 14 是 430px），后者才是当前视口宽度（可缩放、可拖拽） - 多个断点重叠，比如同时写了
(max-width: 768px)和(max-width: 767px)，中间 1px 缺失 - 在 IE8 及更早版本中直接不支持，需用
respond.js补丁（仅限旧项目维护）
@media screen and (min-width: 768px) 和 @media (min-width: 768px) 有区别吗
有。省略 screen 不影响现代浏览器，但严格语法要求媒体类型；省略后等价于 @media all and (min-width: 768px)，会匹配所有设备（包括打印样式表）。
实际建议始终显式写 screen，原因如下：
- 避免意外命中
print或speech等媒体类型导致样式污染 - 团队协作时语义清晰，明确意图是“屏幕设备”
- 某些构建工具（如旧版 Autoprefixer）对无类型媒体查询处理不稳定
另外注意：only screen 中的 only 是为兼容旧浏览器而设，现代项目可不用。
移动端断点怎么设才不容易踩坑
别硬套“iPhone 宽度 = 375px”这种说法——用户可能双指缩放、浏览器有地址栏遮挡、横屏/竖屏切换瞬间视口高度突变。
推荐按内容驱动设断点，而非设备驱动：
- 先写桌面端基础样式（无
@media），确保结构可用 - 逐步缩小浏览器窗口，观察布局何时“撑破”或“挤成一团”，在此处设
max-width断点 - 常用安全断点（基于内容流断裂点，非设备型号）：
1200px（大屏收窄）、992px（桌面转平板横屏）、768px（平板竖屏）、576px（小屏手机） - 避免用
device-pixel-ratio做主要断点依据——它只影响像素密度，不改变布局逻辑
内联 @media 和外链 media 属性哪个更好
优先用 CSS 文件内的 @media 块，而不是 <link media="..."> 引入多个 CSS 文件。
原因很实在：
- HTTP 请求次数少：一个文件加载完即可应用全部断点样式
- 浏览器能预解析并缓存整个样式表，
link[media]中不匹配的 CSS 仍会被下载（只是不应用） - 调试方便：所有响应逻辑集中一处，改断点不用切文件
-
link media仅适合极端场景，比如为打印机单独准备一份纯文本精简样式表
顺带一提：@import 在 CSS 中引入媒体查询样式表会阻塞渲染，已不推荐使用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
