移动端优先需默认为手机竖屏写样式，仅在内容撑不开时用顶层@media向上增强；必须添加viewport标签，且断点应选768px、1024px、1200px等语义化宽度。
移动端优先不是加个 @media 就算数，而是默认所有样式都为手机竖屏服务，只在内容撑不开、需要新布局时，才用 @media (min-width: ...) 向上增强。
为什么 @media 在真机上完全没反应
八成是漏了 <meta name="viewport" content="width=device-width, initial-scale=1">，或者把 @media 嵌套在选择器里了。
-
.nav { @media (min-width: 768px) { ... } }—— 这种写法浏览器直接忽略，必须把@media提到 CSS 文件顶层，和.nav平级 - 没加 viewport 标签，移动端浏览器会按默认 980px 宽度渲染，
min-width: 768px永远不会匹配 - DevTools 模拟器可能“假装生效”，但真机横竖屏切换、系统字体放大后就暴露问题
@media (min-width: ...) 断点怎么选才不踩坑
断点不是设备型号清单，而是内容布局真正需要变化的临界宽度。
- 别写
@media (max-width: 375px)—— iPhone SE 尺寸太细，维护成本高，且现代安卓小屏分辨率早已不统一 - 推荐语义化断点：
@media (min-width: 768px)（平板竖屏）、@media (min-width: 1024px)（平板横屏/小桌面）、@media (min-width: 1200px)（主流桌面） - 避免混用
min-width和max-width：比如同时写@media (max-width: 767px)和@media (min-width: 768px)，某些设备因缩放或 DPR 可能落在 767.5px，两个都不命中
基础样式写在哪？为什么不能全堆在 @media 里
所有未包裹在 @media 中的 CSS 就是移动端默认样式，它必须能独立跑通小屏。
立即学习“前端免费学习笔记（深入）”；
- 容器用
width: 100%而非固定像素；文字用font-size: 16px或rem；导航默认flex-direction: column - 把
@media规则放在 CSS 底部更安全——浏览器从上到下解析，先加载基础样式，再叠加增强规则，弱网下减少重绘抖动 - 不要用
!important强行覆盖媒体查询内样式，它会破坏层叠逻辑，后续改一个 padding 都得全局 grep
最常被忽略的一点：viewport 标签必须存在且配对，否则整个响应式逻辑从根上失效；其次，@media 必须是顶层规则，不能嵌套，哪怕只错一个空格或漏一个 px 单位，整条规则都会静默丢弃。
