关键在于断点选择、样式组织和viewport配置；767px比768px更稳妥是因规避安卓/微信WebView浮点误差；主流断点用320px、480px、767px、1023px、1279px；PC主样式须写在@media外，移动端用max-width降级；viewport需明确user-scalable策略。
直接用 @media 就能切，但关键不是“能不能写”，而是“断点怎么选”“样式怎么组织”“viewport 怎么配”——这三处错一个，移动端就白适配了。
为什么 @media (max-width: 767px) 比 @media (max-width: 768px) 更稳妥？
因为多数安卓浏览器和微信 WebView 在判定视口宽度时，会把滚动条、状态栏、甚至某些系统 UI 边框计入布局宽度，导致实际计算出的 width 偶尔为 768.3px 或 767.9px。用 767px 可规避浮点误差导致的漏匹配。
- 主流断点建议优先用
320px、480px、767px、1023px、1279px—— 全部取「最大值减 1」 - 别用
768px作为移动端临界点，除非你明确控制了scrollbar-gutter和overflow行为 -
min-width写法适合渐进增强（PC 主样式在前），max-width更适合降级适配（移动端样式在后）
viewport 标签里 user-scalable=no 真的必要吗？
不是“必要”，而是“必须明确决定要不要”。不加它，iOS Safari 在双击缩放后可能让 @media 失效（因为视觉视口变化但布局视口未重算）；加了它，又可能影响残障用户操作。
- 生产环境建议写：
- 测试阶段可临时放开
user-scalable=yes，验证媒体查询是否随缩放实时响应 -
viewport-fit=cover仅对 iOS 安全区域有作用，和媒体查询无关，别混用
如何避免 PC 端样式被移动端意外覆盖？
常见错误是把 PC 样式写在媒体查询里，结果移动端加载了全部 CSS，又没加 !important 或 specificity 控制，导致小屏下样式打架。
- 主样式（PC 默认）必须写在所有
@media外面，且不依赖min-width条件 - 移动端专属样式只写
@media (max-width: 767px)，不要用and (orientation: portrait)做二次过滤——它不可靠 - 慎用
display: none隐藏 PC 元素：移动端 JS 仍会解析、绑定事件，建议用visibility: hidden+pointer-events: none替代
真正难的不是写出 @media，而是每次改完都要在真机上横竖屏切换三次、清缓存重刷、再检查一次 window.innerWidth 实际值——很多“适配好了”的页面，只是开发者没测到那个刚好卡在断点边缘的旧款华为机型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
