HTML自适应布局需语义化标签、CSS媒体查询与视口控制三者协同；单独堆砌<div>或忽略任一环节，均导致结构脆弱、可访问性受损及维护困难。
HTML自适应布局不是靠某个标签“自动适配”，而是靠语义化标签结构 + CSS 媒体查询 + 视口控制三者协同。单独用 <div> 堆砌，再加一堆 @media，结构照样脆弱、维护成本高。
为什么 <main> 必须唯一且不嵌套？
这是可访问性和逻辑结构的硬性要求。屏幕阅读器依赖 <main> 快速跳转到核心内容；搜索引擎也据此识别页面主干。若嵌套或重复，会导致：
- 辅助技术误判内容层级，跳过关键区块
- CSS 选择器（如
main > article）在响应式断点中行为不可控 - 某些框架（如 Next.js、Astro）服务端渲染时抛出警告甚至降级处理
正确写法只有一处：<main><article>...</article></main>，不要包裹在 <section> 或另一个 <main> 里。
<nav> 和 <aside> 在小屏下的隐藏逻辑怎么设？
不能只靠 display: none 简单粗暴隐藏 —— 这会让语义信息丢失，影响 SEO 和可访问性。应配合 aria-hidden="true" 和媒体查询条件控制：
立即学习“前端免费学习笔记（深入）”；
- 移动端优先：默认隐藏
<aside>，用@media (min-width: 768px) { aside { display: block; } } -
<nav>推荐用visibility: hidden+height: 0+overflow: hidden替代display: none，保留 DOM 结构和语义流 - 若需完全移除语义权重，改用
role="complementary"替代<aside>，但仅限非关键辅助内容
Flex/Grid 布局中，<section> 的子元素宽度为何会溢出？
常见于 <section><div>长URL文本</div></section> 场景。即使设置了 flex: 1 或 grid-template-columns: 1fr，子元素仍可能撑开容器。根本原因是：
- 块级元素默认不换行处理超长内联内容（如未空格的 URL）
- Flex item 默认
min-width: auto，阻止收缩
解决办法必须同时加两处：
section > * { min-width: 0; } —— 允许 flex item 收缩
section > * p, section > * span { word-break: break-word; } —— 主动断行
meta viewport 不写会怎样？写了但参数错呢？
没写 <meta name="viewport" content="width=device-width, initial-scale=1.0">，iOS Safari 会强制以 980px 渲染，文字极小、按钮点不准；写了但漏掉 initial-scale=1.0，部分 Android 浏览器会默认放大，导致横向滚动条出现。
常见错误配置：
-
content="width=320"—— 固定宽度，失去自适应能力 -
content="user-scalable=no"—— 禁止缩放，违反 WCAG 可访问性标准 - 放在
<body>里 —— 浏览器忽略，必须在<head>中且越早越好
真正起效的最小集合只有：<meta name="viewport" content="width=device-width, initial-scale=1">，其余参数按需添加。
语义标签不是装饰，是约束。它决定了 CSS 怎么写、媒体查询在哪断、JS 怎么取节点——一旦结构松散，后续所有自适应逻辑都会在边界场景下失效。
