响应式布局的关键在于语义化HTML结构而非仅依赖viewport：需用<header><nav><main><aside><footer>等标签构建清晰层级，避免多余div嵌套，viewport必须硬编码在head中，图片须移除宽高属性并添加loading="lazy"。
响应度高 ≠ 加了 viewport 就完事，真正卡顿或布局错乱，90% 出在 HTML 结构本身没为响应式留出弹性空间。
语义化标签不是“加分项”，而是响应式布局的结构前提
用一堆 <div> 套来套去，再强的 CSS 也救不了：屏幕阅读器无法识别内容层级，媒体查询难以精准作用于逻辑区块，Flex/Grid 容器内部子元素行为不可预测。
-
<header>、<nav>、<main>、<aside>、<footer>这些标签自带隐式 ARIA 角色和默认流式行为，浏览器和辅助技术能直接理解其用途 - 把导航菜单塞进
<div class="nav">，移动端折叠时 JS 要额外判断是否在“主区域”内；换成<nav aria-label="主导航">，屏幕阅读器自动跳过或按需朗读 -
<section>不是“分隔线”，它代表一个有独立主题的内容单元——媒体查询里对<section>设置display: flex比对一堆<div>更安全，因为语义边界清晰，不会误伤嵌套的<article>或<aside>
viewport 元标签必须放在 <head> 且不能被 JS 动态插入
很多项目用 JS 注入 <meta name="viewport">，结果 iOS Safari 在首次渲染时忽略它，页面直接以桌面宽度加载，再缩放也补不回错位的 Flex 容器尺寸。
- 正确写法只有一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，且必须硬编码在 HTML 文件的<head>中 - 不要加
user-scalable=no—— 它会禁用双指缩放，违反 WCAG 1.4.4（缩放要求），且在部分 Android 浏览器中导致min-width媒体查询失效 - 如果用了 SSR 或构建工具生成 HTML，确认该标签未被模板引擎过滤或重复注入（重复会导致某些旧版 UC 浏览器解析异常）
响应式容器的 HTML 层级不能超过三层嵌套
常见错误：为了“方便管理”把整个页面包进 <div id="app">，里面再套 <div class="wrapper">，再套 <div class="container">。这样三层 <div> 嵌套会让 max-width、padding 和 flex-basis 的计算链变长，尤其在低端安卓机上触发重排抖动。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<body>直接作为 Flex/Grid 容器（display: flex; flex-direction: column;），<header>、<main>、<footer>为一级子元素 - 若需居中内容区，用
<main>自身设max-width: 1200px+margin-inline: auto，而非套一层<div class="inner"> - 侧边栏用
<aside>，并确保它和<main>是同级兄弟元素——这样媒体查询里只需控制<main>的flex值，<aside>自动跟随，不用 JS 操控 DOM 顺序
图片和媒体元素必须带 loading="lazy" 且避免内联 width/height
HTML 中写死 <img width="800" height="600"> 会导致浏览器按固定像素渲染，即使 CSS 设了 max-width: 100%，初始布局仍按 800px 占位，拉伸后模糊，且阻塞主线程等待尺寸计算。
- 删掉所有
width和height属性，改用 CSS 控制尺寸（如img { max-width: 100%; height: auto; }） - 必须加
loading="lazy"，否则首屏外图片会抢占带宽，延迟关键 CSS 解析，实测 LCP（最大内容绘制）平均恶化 300ms+ - 对 banner 图或关键首屏图，可加
fetchpriority="high"，但仅限真正影响首屏渲染的 1–2 张，多了反而挤占其他资源
真正难的不是写多少媒体查询，而是 HTML 结构里每多一层无意义的 <div>、每少一个语义标签、每漏一个 loading="lazy"，都在 silently 拖慢渲染流水线。这些点不修正，CSS 再炫也没用。
