必须添加viewport meta标签，再配合流式单位、弹性布局和媒体查询三件套才能真正实现响应式；需替换px为相对单位，用Flex/Grid替代浮动，图片等元素设max-width:100%，并严格测试断点。
直接加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是必须的，但只加这行远远不够——它只是让页面“能缩放”，不等于“会适配”。真正起效要靠 CSS 层的三件套：流式单位、弹性容器、媒体查询。
必须补上 viewport meta 标签
没有它，所有后续 CSS 都白搭。移动端浏览器默认按 980px 宽度渲染，文字小得看不清，用户得双指放大才能阅读。
- 把它加在
<head>里，位置越靠前越好，不能漏写或拼错name和content - 别加
user-scalable=no—— 这会禁用用户缩放，违反 WCAG 可访问性要求，部分国家法律也禁止 - 如果已有其他
<meta name="viewport">，删掉旧的，只留一个，避免冲突
把固定像素（px）换成相对单位
查一遍所有 width、max-width、padding、margin、font-size，凡是以 px 结尾的，优先改用 %、rem 或 vw。
-
width: 1200px→ 改成width: 100%或max-width: 1200px（加了 max-width 才能在小屏收缩） -
font-size: 16px→ 改成font-size: 1rem（前提是根元素html没被重设 font-size） - 导航栏高度、卡片间距等，用
rem替代px，后续统一调html { font-size: 16px }就能批量缩放 - 慎用
em做外边距——它会继承父级 font-size，嵌套深时容易失控
用 Flexbox 或 Grid 替换 float / inline-block 布局
老式浮动布局（float: left + clear: both）在响应式场景下极易崩，尤其遇到内容高度不一致时。
立即学习“前端免费学习笔记（深入）”；
- 两栏/三栏结构：把父容器改成
display: flex，子项用flex: 1或flex: 0 0 33.333%，再加flex-wrap: wrap - 九宫格/卡片列表：用
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，比写死列数更健壮 - 别给子项设
float同时又设display: flex——CSS 会忽略 float，但开发者容易误以为它还在起作用 - 如果用了 jQuery 插件（如轮播图、瀑布流），确认它是否支持 resize 重绘；否则窗口缩放后布局错位
图片和嵌入内容必须加 max-width: 100%
img、iframe、video、pre 这几类元素最容易撑破容器，尤其在手机竖屏下。
- 全局加一条：
img, iframe, video, pre { max-width: 100%; height: auto; } - 如果图片本身分辨率低，
max-width: 100%会让它在大屏上模糊——这时得换srcset+sizes提供多倍图 - 表格（
table）默认不响应：加display: block; overflow-x: auto;包一层<div>，再设table { width: 100%; } - 第三方 embed（如地图、微博卡片）通常自带固定宽高，需额外用
@media覆盖其内联样式，或包裹<div class="embed-responsive">并用 padding-top 模拟宽高比
最常被跳过的一步是测试断点逻辑：很多人写了 @media (max-width: 768px)，却没验证 769px 时是否真恢复桌面样式——浏览器 DevTools 的设备模拟器要手动拖动宽度滑块，而不是只点几个预设尺寸。实际设备上，iPad 横屏是 1024×768，但 device-width 返回的是 768，这个细节不注意，菜单就永远收不回去。
