响应式布局是系统性工程，必须从开始；需用flex/grid替代float，设图片max-width:100%、文字rem+媒体查询调优、内容驱动断点、移动优先开发并真机测试。
直接说结论：响应式布局不是“加几个媒体查询就完事”，而是从 <meta name="viewport"> 开始的系统性约束——漏掉它，后面所有 CSS 都可能白写。
必须在
移动端浏览器默认以 980px 宽度渲染页面，再缩放显示。不加 viewport，max-width: 100% 和媒体查询都会失效，你看到的“小屏效果”其实是被强行缩小的桌面版。
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 别写成
user-scalable=no—— 屏幕阅读器和视力障碍用户依赖双指缩放 - 如果项目要兼容 iOS Safari 旧版本，补上
shrink-to-fit=no（仅 Safari 9–12）
用 flex 或 grid 替代 float + 百分比
老式流式布局靠 float 和 width: 50% 实现两栏，但换行逻辑难控、清除浮动易出错，且无法处理内容高度不一致时的对齐问题。
- 推荐用
display: flex搭配flex-wrap: wrap，子项自动换行，无需计算百分比 -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))能让列数随容器宽度自适应，比写死4fr 1fr更可靠 - 避免
width: 100vw—— 它包含滚动条宽度，小屏下会触发横向滚动条
图片和文字必须设“防溢出”底线
响应式最常破功的地方：一张未约束的图片撑爆容器，或一段没设 font-size 下限的文字在手机上小到看不见。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img alt="编辑HTML网页响应式布局的入门技巧" >必须加：max-width: 100%; height: auto; - 正文文字用
rem，但根字体不能只设html { font-size: 16px; }；应配合媒体查询逐步放大，比如@media (max-width: 480px) { html { font-size: 14px; } } -
<pre class="brush:php;toolbar:false;"></pre>和<code>块级代码需加overflow-x: auto;，否则长行直接溢出屏幕
媒体查询断点别按设备尺寸硬套
写 @media (max-width: 768px) 并不等于“适配 iPad”——真实问题是内容何时开始挤不下、行高是否过密、按钮是否难点击。
- 优先基于内容断点（content-based breakpoints），比如当标题换行两次、卡片宽度＜280px 时才触发调整
- 移动优先写法：先写基础样式（针对最小屏），再用
@media (min-width: 769px)增强中大屏，避免覆盖混乱 - 别在每个组件里重复写相同断点；提取成 CSS 自定义属性，如
--breakpoint-tablet: 769px;
最容易被忽略的其实是测试环节：Chrome DevTools 的设备模拟只是渲染快照，真机上触摸目标大小、字体抗锯齿、视口缩放行为都可能不同。上线前至少用三台真实手机（iOS + Android + 折叠屏）点一遍导航和表单。
