响应式HTML网页需从根标签起构建适配体系：必加，配合移动优先HTML结构、Flexbox/Grid布局、相对单位（rem/vw）、语义化标签、max-width:100%图片及srcset，并依设备特性取舍内容。
响应式HTML网页不是靠“加个媒体查询就完事”，而是从 根标签开始就要有适配意识。核心在于：视口控制、流动结构、断点分层、内容优先。
必须加 <meta name="viewport">，否则媒体查询基本失效
很多新手写好了 @media 规则却没反应，八成是漏了这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
它告诉移动端浏览器：“别自动缩放页面，按设备真实宽度渲染”。没有它，max-width: 768px 这类断点在手机上可能永远不触发——因为浏览器默认把整个桌面版页面缩成一小块来显示，逻辑宽度远超实际屏幕。
- 缺这行时，
screen.width在 JS 中可能返回 980 或 1024（模拟桌面视口），而非物理像素 -
initial-scale=1.0是关键，去掉会导致 iOS Safari 强制缩放 - 不要写
user-scalable=no，它违反 WCAG 可访问性要求
用 rem 或 vw 替代固定 px，但别全盘替换
字体、内边距、容器宽高用相对单位才能随屏幕缩放，但盲目替换会出问题：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
rem依赖根元素font-size，建议用 JS 动态设置（如根据document.documentElement.clientWidth计算），或 CSS clamp()：font-size: clamp(14px, 4vw, 18px); -
vw对字号友好，但用于 margin/padding 时，在小屏上可能压缩过狠，比如padding: 2vw在 iPhone SE 上只剩 3px - 边框（
border）、图标尺寸、阴影模糊值仍建议用px，它们不该随缩放变细或变糊
Flexbox/Grid 布局要配合“移动优先”的 HTML 结构顺序
响应式不是只靠 CSS 调整位置，HTML 元素的 DOM 顺序决定了移动端阅读流。例如导航菜单：
- 错误写法：用
float或position: absolute把 logo 和菜单强行并排，移动端还得用 JS 重排顺序 - 正确思路：HTML 里先写 logo，再写 nav，CSS 用
display: flex+justify-content: space-between实现横排；小屏时直接flex-direction: column就自然堆叠 - 语义化标签如
<nav></nav>、<main></main>不仅利于 SEO，也让辅助技术（如读屏器）按逻辑顺序读取，和视觉顺序一致
图片和媒体元素必须设 max-width: 100%，且提供 srcset
一张未约束的 <img src="banner.jpg" alt="如何制作响应式HTML网页？屏幕适配基础思路" > 在窄屏上会横向溢出，撑破布局：
- 基础防护：
img { max-width: 100%; height: auto; }—— 必须全局加，不能只靠 class - 更进一步：用
srcset提供多分辨率图，避免小屏加载 4K 图浪费带宽：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="如何制作响应式HTML网页？屏幕适配基础思路" > -
<picture></picture>适合艺术指导场景（比如小屏用裁剪版，大屏用全景版），但别为了兼容旧浏览器硬套 polyfill
真正容易被忽略的是：响应式不是“让所有东西都缩放”，而是判断哪些内容在小屏上该隐藏、该折叠、该重组、甚至该删减。比如 PC 端的侧边栏广告位，在手机上直接 display: none 比强行塞进底部更合理——适配的本质是取舍，不是拉伸。
