用3–4个min-width断点（如768px、1024px、1200px）覆盖主流设备，按内容临界点而非机型设断点，并必须配合viewport meta标签实现移动优先响应式布局。
直接用 3–4 个基于视口宽度的 min-width 断点就能稳稳覆盖主流移动设备，关键不是凑机型数字，而是让样式随内容自然“撑开”。
按内容临界点设断点，别背 iPhone 尺寸
文字开始挤成两行、按钮排不下、图片溢出容器——这些才是真实触发点。比如导航栏从竖排变横排，不是因为“iPhone 14 是 390px”，而是当宽度足够容纳所有菜单项且不换行时，那个宽度就是你的断点。
- 优先用
@media (min-width: 768px)切平板竖屏（如 iPad） -
@media (min-width: 1024px)对应平板横屏或小桌面，适合加网格列 -
@media (min-width: 1200px)覆盖主流桌面，可设固定最大宽度
必须配 viewport meta 标签
没这行，媒体查询基本失效：
它告诉浏览器：别缩放，按设备真实视口宽度渲染。否则 CSS 里的 width 值会失真，断点全乱。
别混用 min-width 和 max-width 在同一逻辑里
容易覆盖冲突，调试困难。统一用 移动优先写法：基础样式默认适配手机，再用 min-width 向上增强。
- 错误示范：
@media (max-width: 767px) { ... }+@media (min-width: 768px) { ... } - 推荐写法：顶部写手机样式，然后只用
@media (min-width: 768px)、@media (min-width: 1024px)等逐级增强
宽度比高度可靠，别碰 max-height
地址栏滚动时收起/展开，window.innerHeight 会跳变，max-height 断点极易误触发。而视口宽度稳定，且和设计稿切图逻辑一致（如 750px / 2 = 375px）。
- 所有主流手机视口宽度集中在 320px–414px 区间
- iPad mini 竖屏是 768px，别用
max-width: 768px“通吃手机”，会把它也卷进来
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
