@media在真机不生效，90%因viewport标签缺失或错误：必须置于head最顶部、内容为width=device-width且initial-scale=1.0；@media须平级书写、显式写screen、单位px不可省、and不可漏，推荐统一用min-width向上增强。
@media 在真机上完全没反应，90% 是因为漏了 <meta name="viewport">，不是 CSS 写错了。
为什么 @media 在手机上不生效
真机上 @media (max-width: 768px) 或 @media (min-width: 768px) 一条都不触发，大概率是浏览器根本没进响应式渲染模式。它把页面当桌面端处理，视口宽度默认是 980px（哪怕你手机只有 375px 宽），所以所有基于 width 的条件永远不匹配。
必须确认三点：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">存在，且写在最顶部 - 不能写成
width=375、max-device-width或漏掉initial-scale=1.0 - 不要加
user-scalable=no——iOS Safari 16+ 已禁用，还可能让表单无法放大
@media 写在哪儿才有效
@media 规则必须平级写在 CSS 文件顶层，不能嵌套在任何选择器内部。
错误写法（真机直接忽略）：
.header {
@media (min-width: 768px) {
display: flex;
}
}
正确写法（和 .header 并列）：
.header {
display: block;
}
@media screen and (min-width: 768px) {
.header {
display: flex;
}
}
额外注意：
- 显式写
screen，避免被打印样式干扰 - 单位不能省：
768px✅，768❌ - 括号、空格、
and连接符一个都不能错
该用 min-width 还是 max-width
统一用 @media (min-width: 768px) 向上增强，别用 @media (max-width: 767px) 向下覆盖。
原因很实际：
- 基础样式默认适配小屏，大屏只增量覆盖，CSS 更轻、加载更快
- 断点连续定义更安全：
768px→992px→1200px，不会漏掉 1px 间隙 -
min-width: 768px和max-width: 768px在精确宽度下会同时命中，层叠顺序难控 - 主流框架（Bootstrap、Tailwind）全按这个逻辑设计，兼容性有保障
断点值设多少才靠谱
别抄 iPhone 像素：375px、414px 这类值在高 DPR 设备或缩放后极易失效。断点应该由内容决定，不是设备型号。
推荐四档语义化断点：
-
@media (min-width: 576px)：小屏手机内容开始撑开（比如按钮间距太挤） -
@media (min-width: 768px)：平板竖屏，适合切两栏或改 flex 方向 -
@media (min-width: 992px)：宽屏平板/窄桌面，网格列数可增加 -
@media (min-width: 1200px)：标准桌面，加侧边栏或限制最大宽度
记住：device-width 检测物理像素，width 才是 CSS 渲染依据——响应式只认后者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
