必须添加正确的viewport meta标签，即<meta name="viewport" content="width=device-width, initial-scale=1">，并置于<head>最前；同时用max-width:100%替代width:100%，为img和iframe设置max-width:100%; height:auto，并谨慎使用媒体查询。
viewport meta 标签必须加，且不能写错
旧网站没响应式，最直接的“急救”是让移动端浏览器别自动缩放。不加或写错 viewport，iOS Safari 和安卓 Chrome 会按桌面宽度渲染，文字小到看不清，点击区域错位。
-
<meta name="viewport" content="width=device-width, initial-scale=1">是底线，缺一不可；width=device-width告诉浏览器用设备真实宽度，initial-scale=1阻止默认缩放 - 别写成
width=320或user-scalable=no——前者锁死宽度，后者禁掉用户双指缩放，违反可访问性 - 确保它出现在
<head>最前面，某些旧 CMS（如早期 WordPress 插件）可能在它前面注入其他meta，导致失效
用 max-width 替代 width:100% 防止横向滚动条
老代码里大量 width: 100% 在窄屏下常撑破视口，触发横向滚动。这不是 bug，是 CSS 盒模型对 padding/border 的默认处理方式。
- 把关键容器（比如
#wrapper、.container）的width改成max-width: 100%，再配box-sizing: border-box - 避免给
body或html设width: 100%—— 它们本该撑满，强行设反而干扰 viewport 行为 - 检查是否有固定像素宽的元素（如
width: 960px的 div），它们是横向滚动元凶，优先用max-width: 100%+margin: 0 auto替代
图片和 iframe 必须加 responsive 声明
旧站里 <img> 和 <iframe> 默认不随容器缩放，一加载就突破视口，还可能拉低页面性能。
- 全局加一条 CSS：
img, iframe { max-width: 100%; height: auto; }—— 注意不是width: 100%，否则高宽比会崩 - 如果 iframe 是 YouTube 视频，原代码带
width="560"属性，得删掉，只靠 CSS 控制；否则属性优先级高于样式 - 老旧 IE（≤8）不支持
max-width，但这类浏览器基本不走移动流量，不用 hack，真要兼容就加 JS fallback
媒体查询只补关键断点，别碰全局重排
给十年以上的 HTML 结构套完整响应式框架，等于重写。真要改，只动三处：导航栏折叠、字体大小微调、表单控件间距。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 768px)就够，别搞 4+ 断点——旧 DOM 结构经不起多层嵌套 media query - 导航菜单常见问题：
float: left的li在小屏堆成一行溢出，改成display: block+text-align: center最省事 - 别碰
position: absolute的元素，尤其广告位或弹窗，它们的top/left值在缩放后全乱，优先隐藏或替换成相对定位
最麻烦的从来不是 CSS 写法，而是旧 HTML 里混着内联样式、table 布局、无语义标签——这些没法靠几个 media query 修好，得一层层看 DOM 结构再动手。改之前先用 Chrome DevTools 的 Device Toolbar 看清哪块真溢出了，别凭感觉加 !important。
