viewport meta标签必须置于head最开头，标准配置为content="width=device-width, initial-scale=1.0"；否则移动端按980px渲染，媒体查询失效、字体模糊、点击偏移。
语义化标签本身不自适应，它们只是容器；真正起作用的是你写的 CSS 媒体查询和布局逻辑。
viewport meta 标签必须正确配置，否则所有响应式都白搭
没它，移动端浏览器默认按 980px 宽度渲染页面，@media 查询压根不触发，字体糊、点击偏、缩放错乱全来了。
常见错误包括：
- 把
<meta name="viewport">放进<body>或注释里 - CMS 模板中被重复插入多遍，造成冲突
- 写成
content="width=1200"这类固定值，iPhone SE 直接拉伸内容 - 混用
user-scalable=no，iOS 17+ 下部分场景会阻断双指缩放
标准写法只有一行，且必须紧贴 <meta charset> 后放在 <head> 最早位置：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0">
nav / header / main 等标签不是“自动适配”，而是提供精准控制粒度
比如小屏下隐藏侧边栏，写 aside { display: none; } 比写 .sidebar { display: none; } 更可靠——前者不会因 class 名重复或 JS 动态添加而失效。
注意三点：
-
<main>必须全页唯一，否则屏幕阅读器跳转错乱 -
<section>和<article>不是样式容器，它们承载语义层级，影响@media中选择器的复用性 - 别用
<div class="header">代替<header>，后者在 Safari VoiceOver 中能被直接识别为“页面头部”，前者得额外加role="banner"才等效
table 自适应不能只靠 width: 100%
浏览器默认 table-layout: auto，列宽由最长单元格内容撑开，小屏下极易横向溢出。
真正起效的是组合策略：
- 强制布局逻辑：
table { table-layout: fixed; width: 100%; }，否则fixed不生效 - 显式列宽控制：用
<col>或第一行<th>的width属性，如<th style="width: 25%">姓名</th> - 列数 ≥ 4 或字段语义强时，放弃表格形态，改用块级堆叠：
tr { display: block; }+td::before { content: attr(data-label); } - 报表类必须滚动时，包裹容器加
overflow-x: auto，并确保touch-action: manipulation
picture 标签才是图片层面的原生响应式方案
<picture> 不是装饰，它是浏览器自动选图的调度中心。它本身不显示图片，靠内部 <source> 提供条件，最后由 <img> 兜底。
典型结构：
<picture> <source media="(min-width: 1200px)" srcset="hero-large.jpg"> <source media="(min-width: 768px)" srcset="hero-medium.jpg"> <img src="hero-small.jpg" alt="hero"> </picture>
关键点：
- 浏览器按
<source>顺序匹配，第一个满足条件的就加载，后面的忽略 -
srcset可配合sizes实现更精细的分辨率适配，比如srcset="logo-1x.png 1x, logo-2x.png 2x" - 永远保留一个
<img>作为兜底，否则无匹配<source>时空白
最常被忽略的是：语义化标签的“响应”不是靠自己变形，而是靠你把它放进正确的媒体查询上下文里——<nav> 在大屏下用 Flex 排布，在小屏下用 JS 控制汉堡菜单展开，这才是真实工作流。
