必须加，否则移动端页面会按980px桌面宽度渲染导致文字过小、按钮点不准；标准写法是，须置于最前。
必须加 <meta name="viewport">，否则移动端直接失效
不加这行，手机浏览器会按桌面宽度（通常 980px）渲染页面，文字小得看不清，按钮点不准——这不是 CSS 能修的。它必须放在 最前面，且只写一次。
标准写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误包括：
- 漏掉、写在 CSS 后面，导致样式先加载再重排
- 加了
user-scalable=no还声称“适配无障碍”，实际禁用缩放违反 WCAG - 用
max-device-width（已废弃），应统一用max-width
<img alt="HTML响应式模板代码怎么改？常用标签修改方法" > 标签不加 max-width: 100% 就会横向溢出
哪怕父容器用了百分比，<img alt="HTML响应式模板代码怎么改？常用标签修改方法" > 默认是固有尺寸，小屏上直接撑破布局。CSS 必须全局覆盖：
立即学习“前端免费学习笔记（深入）”；
img {
max-width: 100%;
height: auto;
}
注意两点：
- 别只写
width: 100%—— 会导致图片拉伸变形 - 如果图是背景，就该用
background-size: contain或cover，而不是塞<img alt="HTML响应式模板代码怎么改？常用标签修改方法" > - 高分辨率屏需要
srcset，但普通响应式场景下，单图 +max-width已够用
语义化标签本身不响应式，但影响媒体查询逻辑
<header></header>、<nav></nav>、<main></main> 这些标签不会自动变宽变窄，但它们让 CSS 选择器更清晰、断点更可控。
例如，想在手机上隐藏侧边栏，写 @media (max-width: 768px) { aside { display: none; } } 比写 .col-3 { display: none; } 更易维护。
容易忽略的点：
-
<section></section>和<div> 视觉上没区别，但前者能被屏幕阅读器识别结构，影响可访问性测试 <li>嵌套过深（如 <code><section><article><div><div>...）会让媒体查询选择器冗长难调试 <li>不要为了“语义化”强行套标签，比如纯装饰线条用 <code><hr>反而增加语义噪音 - 用
flex: 1让子项等分剩余空间 - 用
flex: 0 1 300px表示“不放大、可缩小、基准 300px”，比width: 300px安全 - 配合
min-width: 0防止文本溢出（尤其内联元素或长单词）
Flexbox 容器里子元素别用固定 width: 300px
Flex 布局的响应式能力来自弹性分配，一旦子项设死像素宽度，flex-wrap 就可能失效或换行错乱。
正确做法是：
典型翻车现场：导航菜单项写成 nav a { width: 120px; }，小屏下文字被截断或换行错位。
真正卡住人的往往不是技术多难，而是 viewport 标签漏了、图片没约束、或者 flex 里混着 px 宽度——这些地方一错，整个响应式链条就断在开头。
