必须先写，否则响应式CSS失效；该标签须置于内且在CSS/JS前，width和initial-scale参数不可错写或省略。
必须先写 <meta name="viewport" content="width=device-width, initial-scale=1">，否则所有响应式 CSS 都不生效。
viewport meta 标签放错位置或参数错误
这个标签不是可选项，是响应式启动开关。手机浏览器默认按 980px 渲染页面，不加它，@media 写得再全也白搭。
- 必须放在
内，且在任何 CSS/JS 加载前 —— 放到里完全无效 -
width=device-width不能写成width=375或width=768，否则 iPad、折叠屏、安卓平板全会错判视口 -
initial-scale=1不可省略，某些安卓 WebView 会默认缩放到 0.8–0.9 - 别加
maximum-scale，iOS Safari 某些版本下会禁用双击放大，影响可访问性
HTML 结构要用语义化标签，不是堆 <div>
<p>响应式不是靠媒体查询“撑”出来的，而是靠 DOM 层级和流动边界决定的。CSS 的 <code>flex 或 grid 布局需要明确的容器锚点。
- 用
<header></header> 包导航区，不用 <div class="header"> —— 后者无法被屏幕阅读器识别，JS 控制汉堡菜单时也更难操作<li>
<code><nav></nav> 必须直接包裹 <ul><li><a></a></li></ul>，而不是嵌套多层 <div> —— 否则 <code>display: flex 在小屏切换时容易漏掉层级 -
<main></main> 只能出现一次，它是内容流起点；<section></section> 应围绕独立语义块（如“服务介绍”），不是为了套样式而加
- 避免用
<div> 替代 <code><article></article> 或 <aside></aside>，否则媒体查询里改 display 会破坏语义流rem 基准不能靠 media query 硬写死
写 @media (max-width: 768px) { html { font-size: 14px; } } 是典型误区。设备逻辑宽度 ≠ 断点值，iPad Pro 屏幕宽度是 1024px，但 viewport 宽度可能是 834px —— 这个值才是 rem 计算依据。
立即学习“前端免费学习笔记（深入）”；
- 动态计算才可靠：
document.documentElement.clientWidth / 375 * 16（375 是设计稿基准宽度，16 是默认根字体大小）
- iOS 键盘弹出时
clientWidth 不变，但视口被压缩，需监听 focus 事件临时调小 font-size
- 某些安卓 WebView 不触发
resize，得配合 matchMedia('(min-width: 0px)') 监听变化
- 媒体查询断点建议用
em 单位，比如 @media (min-width: 48em)（即 ≥768px），比像素值更稳定
图片和容器宽度要匹配 viewport，不是设计稿像素
直接写 width: 375px 或 max-width: 100% 而不考虑 DPR 和视口缩放，会导致高分辨率屏上模糊、小屏上溢出。
- 图片必须用
srcset + sizes，例如：<img src="small.jpg" srcset="small.jpg 375w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 375px) 100vw, (max-width: 768px) 50vw, 33vw" alt="HTML怎么编写基础响应式模板" >
- 容器宽度优先用
%、rem、ch，慎用 vw —— 它包含滚动条宽度，iOS Safari 下可能意外截断
- 避免给
width，这会强制触发横向滚动条
最常被跳过的其实是 viewport 标签的位置和 initial-scale 参数，以及把 rem 当成静态单位去写媒体查询 —— 这两个点一旦出错，后续所有布局都会漂移，而且很难定位。
<header></header> 包导航区，不用 <div class="header"> —— 后者无法被屏幕阅读器识别，JS 控制汉堡菜单时也更难操作<li>
<code><nav></nav> 必须直接包裹 <ul><li><a></a></li></ul>，而不是嵌套多层 <div> —— 否则 <code>display: flex 在小屏切换时容易漏掉层级<main></main> 只能出现一次，它是内容流起点；<section></section> 应围绕独立语义块（如“服务介绍”），不是为了套样式而加<div> 替代 <code><article></article> 或 <aside></aside>，否则媒体查询里改 display 会破坏语义流rem 基准不能靠 media query 硬写死
写 @media (max-width: 768px) { html { font-size: 14px; } } 是典型误区。设备逻辑宽度 ≠ 断点值，iPad Pro 屏幕宽度是 1024px，但 viewport 宽度可能是 834px —— 这个值才是 rem 计算依据。
立即学习“前端免费学习笔记（深入）”；
- 动态计算才可靠：
document.documentElement.clientWidth / 375 * 16（375 是设计稿基准宽度，16 是默认根字体大小） - iOS 键盘弹出时
clientWidth不变，但视口被压缩，需监听focus事件临时调小font-size - 某些安卓 WebView 不触发
resize，得配合matchMedia('(min-width: 0px)')监听变化 - 媒体查询断点建议用
em单位，比如@media (min-width: 48em)（即 ≥768px），比像素值更稳定
图片和容器宽度要匹配 viewport，不是设计稿像素
直接写 width: 375px 或 max-width: 100% 而不考虑 DPR 和视口缩放，会导致高分辨率屏上模糊、小屏上溢出。
- 图片必须用
srcset+sizes，例如：<img src="small.jpg" srcset="small.jpg 375w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 375px) 100vw, (max-width: 768px) 50vw, 33vw" alt="HTML怎么编写基础响应式模板" > - 容器宽度优先用
%、rem、ch，慎用vw—— 它包含滚动条宽度，iOS Safari 下可能意外截断 - 避免给
或设固定width，这会强制触发横向滚动条
最常被跳过的其实是 viewport 标签的位置和 initial-scale 参数，以及把 rem 当成静态单位去写媒体查询 —— 这两个点一旦出错，后续所有布局都会漂移，而且很难定位。
