响应式设计需以内容为驱动定义断点，优先移动端编写，配全viewport标签、图片自适应和流体字体，并持续真机验证。
用 @media 写断点前先想清楚视口范围
响应式不是“加几个 @media 就完事”，关键在定义合理的断点。常见错误是照搬别人写的 768px、1024px，但你的页面内容撑不满 768px 时就该换断点。比如一个只有三列卡片的主页，在 640px 下就已挤不开，硬卡在 768px 反而导致小屏用户看到横向滚动条。
建议做法：
- 先用浏览器设备模拟器（DevTools → Toggle device toolbar）反复缩放，观察布局“崩坏”的临界宽度
- 以内容为驱动定断点，比如
@media (max-width: 639px)、@media (min-width: 640px) and (max-width: 1023px) - 避免写死像素值，可用
em或rem（如@media (max-width: 40em)），更适配用户设置的字号缩放
viewport meta 标签漏写或写错会导致媒体查询失效
很多新手写了 @media 却发现手机上完全不生效，八成是漏了或写错了 <meta name="viewport" content="...">。没有它，移动端浏览器会按桌面宽（通常是 980px）渲染，max-width: 640px 自然永远不匹配。
正确写法只有一行，必须放在 <head> 里：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1">
注意点：
-
width=device-width是核心，不能写成width=320或其他固定值 - 不要加
user-scalable=no—— 这会禁用缩放，违反可访问性要求 - 如果用了
initial-scale=1.0但页面仍放大，检查是否在 CSS 里误设了html { font-size: 62.5%; }之类影响根字体的规则
移动端优先写法比桌面优先更易维护
别从 1200px 宽度开始写样式再层层覆盖，那样 CSS 体积大、逻辑绕、后期改起来容易漏掉某一层 @media。移动端优先是把基础样式写在默认层（无媒体查询），再用 @media (min-width: ...) 往上加。
例如导航栏折叠逻辑：
nav ul { display: flex; }<br>nav li { margin-right: 1rem; }<br><br>@media (max-width: 639px) {<br> nav ul { display: none; }<br> nav .hamburger { display: block; }<br>}
这样好处明显：
- 小屏设备只加载必需样式，节省带宽
- 新增中屏适配时，只需加一条
@media (min-width: 640px) and (max-width: 1023px)，不会干扰原有逻辑 - 调试时删掉所有
@media块，就能看到最简可用态，快速定位问题
图片和字体在响应式中常被忽略的两个坑
写了完美布局，结果图片溢出容器、文字在小屏上糊成一片——这类问题不来自媒体查询本身，而是配套资源没跟上。
图片处理要点：
- 给
<img>加max-width: 100%; height: auto;，否则它会按原始尺寸撑开父容器 - 避免只用一张大图 +
width: 100%，应配合<picture>或srcset提供不同分辨率源，比如：<img src="logo-small.png"<br> srcset="logo-small.png 480w,<br> logo-medium.png 768w,<br> logo-large.png 1200w"<br> sizes="(max-width: 479px) 480px, (max-width: 767px) 768px, 1200px">
字体处理要点：
- 别用固定
px设定正文大小，改用rem或clamp()，例如：font-size: clamp(1rem, 2.5vw, 1.25rem); - 行高（
line-height）也建议用无单位数值（如1.5），避免在缩放时产生意外间距
响应式的真正难点不在语法，而在持续验证：每次改布局，都要在真机上测横竖屏切换、字体缩放、网络限速下的加载表现。漏掉任意一环，用户看到的可能就是错位的按钮或切不进屏幕的菜单。
