viewport标签必须加在head最前面，否则@media不触发、Flex/Grid按980px渲染；标准写法为，禁用user-scalable=no，断点需实测内容临界值而非硬套768px。
旧版HTML网页加响应式，不是重写，而是分层补救：先让viewport生效，再用媒体查询兜底，最后用现代布局收口。没加<meta name="viewport">的页面，其他所有改动都白忙。
viewport 标签必须补在
这是硬开关，不是可选项。漏掉、写错位置、参数拼错，都会导致浏览器按默认 980px 渲染，@media 规则完全不触发。
-
name="viewport"不能写成name="viewpoint"或漏引号 -
content必须含width=device-width，写成width=320或width=1200会锁死宽度 - 必须放在
内，且尽可能靠前——别被<title></title>或其他<meta>挡住 - 别加
user-scalable=no，它会破坏双击放大和无障碍操作，iOS Safari 还可能让maximum-scale失效
用 @media (min-width: ...) 替代 max-width 递进覆盖
旧代码通常用固定像素、float 和内联样式堆出来，直接套 @media (max-width: 768px) 容易漏重置、覆盖冲突、留缝隙。
- 先清掉所有
width: 960px、float: left这类“桌面锚点”，改用百分比或max-width+margin: 0 auto - 基础样式（窄屏）直接写，不包
@media；大屏增强规则统一用@media (min-width: 768px)、(min-width: 1024px)往上叠加 - 断点别抄模板数字。打开 Chrome DevTools，拖动窗口宽度，观察导航文字何时换行、卡片何时重叠、按钮是否被截断——记下那个真实像素值（比如
624px），再取整为640px或768px - 全局加
* { box-sizing: border-box; }，否则padding和border会让百分比计算失准，三栏直接错位
图片和容器必须配对约束，不能只靠 width: 100%
旧站常见问题：小屏上图片溢出、拉伸变形、加载巨图浪费流量。CSS 拉伸解决不了加载问题，只靠 width: 100% 会丢宽高比。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img alt="如何重构旧版HTML网页为响应式布局" >、<video></video>、<iframe></iframe>都要加：max-width: 100%; height: auto; - 如果父容器用了
display: flex，检查子项flex-shrink: 0是否被设死——它会阻止max-width生效 - SVG 要加
preserveAspectRatio="xMidYMid meet"，否则可能被裁切 - 真正响应式图片还得用
srcset+sizes，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="如何重构旧版HTML网页为响应式布局" >
Flex/Grid 替换 float，但别一刀切
旧站大量用 float 布局，强行塞 display: grid 可能破坏结构，尤其有 IE 兼容要求时。
- 优先用
display: flex改顶部导航、侧边栏+主内容这类线性结构；flex-wrap: wrap+flex-basis比float更稳 - 三栏以上复杂结构再上
display: grid，移动端用@media改grid-template-columns: 1fr垂直堆叠，别用display: block覆盖，那会退出 Grid 上下文 - 要兼容 IE11？
gap得回退写成grid-column-gap和grid-row-gap；flex-direction: column前，先给子项设flex: none; width: 100%，否则flex: 1会继续拉伸 - 别混用
float和flex在同一个容器里，IE11 及以下行为不可控
重构旧页面最耗时的不是写新 CSS，而是校验每个断点下表单控件是否可点击、文字是否可读、触摸目标是否 ≥44px、焦点顺序是否合理——这些细节不会报错，但用户一碰就卡住。
