响应式布局必须配置<meta name="viewport" content="width=device-width, initial-scale=1.0">，且置于<head>最开头；漏写或错位会导致移动端按980px渲染、媒体查询失效、字体错乱及300ms点击延迟。
响应式布局不靠某个“魔法标签”，而是由语义化结构 + 视口控制 + 流式单位 + 媒体查询共同实现。 单独写个 <header> 或 <main> 不会自动响应，但它们是正确响应的前提。
必须写的 <meta name="viewport"> 标签
没它，移动端页面会默认缩放成“小地图”模式，所有响应式 CSS 都白搭。
- 固定写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 别漏掉
content里的width=device-width—— 这是让浏览器把 CSS 像素宽度对齐设备物理宽度的关键 - 如果项目要禁用用户缩放（如 kiosk 场景），可加
user-scalable=no，但普通网站不建议 - 这个标签必须放在
<head>里，且越靠前越好，避免渲染阻塞
<header>、<nav>、<main> 等语义化标签不是摆设
它们本身不带样式，但影响三件事：可访问性、SEO、CSS 选择器稳定性。
- 屏幕阅读器靠这些标签识别页面区域，比如跳过
<nav>或直接进入<main> - 搜索引擎更倾向给
<main>内容更高权重，<aside>内容则可能被降权 - 写
main > article比.content .post更安全——后者一旦 class 名改了或嵌套多一层就失效 - 注意：
<section>不等于“一屏”，它表示有主题的独立内容块；没有语义必要时，别硬套
让布局真正“响应”的核心 CSS 属性
HTML 标签只是骨架，撑起响应能力的是这几个 CSS 特性：
立即学习“前端免费学习笔记（深入）”；
-
max-width: 100%+height: auto：图片/iframe 不溢出容器，这是最常漏掉的一对 -
display: flex或display: grid：替代浮动和绝对定位，天然支持流式伸缩；flex-wrap: wrap是让多栏在小屏换行的关键 - 相对单位：优先用
rem（根字体大小）、vw（视口宽百分比）、%，少用px；em在嵌套深时容易失控，慎用 -
@media (max-width: 768px)：断点别死记 768，应基于内容崩坏点定；比如某段文字在 640px 开始换行难看，那就从那里切
容易被忽略的兼容性细节
现代写法很爽，但上线前得盯住两处：
-
grid在 iOS Safari 15.4 以下不支持subgrid，也别用gap在inline-grid上——老版本会忽略整个规则 -
flex的flex-grow在 Android 4.4 WebView 里表现异常，保险起见用flex: 1替代flex-grow: 1 -
aspect-ratio虽好，但 IE 完全不支持，Safari 15.2+ 才稳定；做卡片比例控制时，仍建议用 padding-top 百分比 hack 保底
