必须添加viewport meta标签，否则移动端按桌面宽度渲染导致响应式失效；推荐移动优先+min-width断点、Flex布局、clamp()控制字体、rem管理间距。
viewport 设置不加，手机端直接失效
很多页面在手机上缩成一团、文字小得看不清，第一反应不是样式写错了，而是 <meta name="viewport"> 标签漏了。没有它，移动端浏览器会按桌面宽度（通常是 980px）渲染页面，再整体缩小显示——你写的 @media (max-width: 768px) 就根本不会触发。
必须加这一行，且放在 <head> 最前面：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width让视口宽度等于设备物理宽度（单位是 CSS px），不是默认的 980px -
initial-scale=1.0防止页面加载后自动缩放，避免用户第一次看到“迷你版”页面 - 别写
user-scalable=no—— 屏蔽双指缩放会违反 WCAG 可访问性规范，也容易被 iOS Safari 拒绝渲染
用 min-width 断点 + 移动优先，别堆 max-width
写 @media (max-width: 767px) 看似直观，但实际维护时容易漏掉中间状态，比如平板横屏（768px–1023px）和竖屏（768px–812px）行为不一致，max-width 套嵌多了极易冲突。
推荐统一用 min-width，从最小屏开始逐级增强：
立即学习“前端免费学习笔记（深入）”；
- 基础样式（手机）：不包
@media，直接写，字体、间距、单列布局都按小屏设好 - 平板起始：
@media (min-width: 768px)调整栅格、字体、flex-direction - 桌面起始：
@media (min-width: 1024px)加 max-width、多列、hover 效果等 - 断点数值别硬背 Bootstrap 的 768/992/1200——按内容撑开需求定，比如导航栏文字换行点在哪，就设在哪
Flex 布局 + media query 是最稳的组合
Grid 在桌面端很香，但 iOS Safari 对 grid-template-areas 和子项 grid-column 的兼容性仍有坑；而 Flex 在 iOS 12+、Android Chrome 全系支持稳定，语义清晰，适合绝大多数响应式容器。
典型用法：
.nav { display: flex; flex-wrap: wrap; gap: 1rem; }<br>.nav-link { flex: 1 1 100%; }<br>@media (min-width: 768px) { .nav-link { flex: 0 0 auto; } }<br>@media (min-width: 1024px) { .nav { justify-content: space-between; } }
- 手机：
flex: 1 1 100%强制每个链接占满一行 - 平板：
flex: 0 0 auto关闭伸缩，让链接按内容宽度并排 - 注意
flex-wrap: wrap必须显式声明，否则超宽时会溢出容器 - 别依赖
justify-content: center居中导航——小屏单列时它没意义，大屏多列时反而让末尾空隙难控制
字体和间距用 rem 或 clamp()，别只靠媒体查询调
光靠 @media 改 font-size 容易漏改子元素，而且断点之间字体变化是阶梯式的，体验生硬。
更平滑的做法：
- 根字号用
html { font-size: clamp(16px, 2.5vw, 18px); }：小屏保底 16px，大屏随视口线性放大，上限卡 18px 防止过大 - 组件内用
rem：按钮padding: 0.75rem 1.5rem，自动跟随根字号缩放 - 间距慎用
vh/vw：比如margin-top: 10vh在 iPhone 竖屏下可能把内容顶出可视区，优先用rem或固定px（如16px）再配合媒体查询微调
真正麻烦的不是写多少断点，而是字体、行高、边距、阴影这些细节在不同密度屏幕下的视觉一致性——它们没法靠一个 @media 解决，得靠相对单位打底 + 断点微调双保险。
