移动端HTML布局自适应需viewport、单位体系、容器逻辑三者咬合；viewport标签必须正确书写并置于head顶部；单位替换要分场景：字体用rem，间距用vw/%，边框等保留px；Flex/Grid的min-width控制比媒体查询更可靠；语义化HTML结构决定响应式成败。
移动端 HTML 布局自适应不是“加几个媒体查询就完事”，而是 viewport、单位体系、容器逻辑三者必须咬合。漏掉任意一环，就会出现文字小得看不见、按钮点不中、横向滚动条藏不住、iPad 上内容被切掉一半等问题。
viewport meta 标签写错等于没做响应式
几乎所有移动端显示异常（字体极小、页面缩成一团、左右拖动才能看全）都源于这行缺失或拼错：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关键点：
-
width=device-width必须完整拼写，device_width或width=deviceWidth都无效 - 不要加
maximum-scale=1.0或user-scalable=no—— 这会禁用双指缩放，违反 WCAG 可访问性要求，金融/政务类站点尤其不能加 - 该标签必须放在
最顶部，早于所有 CSS 和 JS，否则 iOS Safari 可能先按桌面宽度渲染再重排，造成闪屏 - 一个页面只允许存在一个
<meta name="viewport">，重复写会导致行为不可控
px 单位是静态布局的根源，替换要分场景
直接全局搜索替换 px → rem 或 vw 很危险：字体用 rem 合理，但边框、阴影、border-radius 用 rem 会在小屏上细得看不见，大屏上糊成一片。
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
更稳妥的替换策略：
- 字体大小：
px→rem（配合根元素动态设置font-size） - 容器宽高、内边距、外边距：
px→%或vw/vh（如padding: 2vw比16px更适配不同密度屏） - 边框、描边、圆角：
px→ 保留（或改用1px固定值），因为视觉重量需稳定，不随视口缩放 - 图标尺寸、按钮最小点击区域：
px→ 用min-width/min-height确保 ≥ 44×44px（iOS 人机指南硬性要求）
Flexbox/Grid 的 min-width 控制比媒体查询更可靠
很多人一遇到换行错乱就加 @media (max-width: 768px)，但真正的问题常出在容器约束太弱。比如卡片列表在小屏上高度不一致导致网格塌陷，光靠媒体查询调 flex-direction 解决不了。
推荐写法：
- 卡片流用
display: grid：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; - 工具栏用
display: flex+flex-wrap: wrap，子项设flex: 0 0 calc(50% - 0.5rem)，比单纯width: 50%更抗内容长度干扰 - 表格必须加
table-layout: fixed，并用<col width="200">或 CSScol { width: 200px; }锁列宽，否则小屏上文字撑开列宽，必然横向溢出
语义化 HTML 结构决定响应式成败上限
响应式不是纯 CSS 工程，HTML 结构是否经得起垂直堆叠，直接决定小屏体验下限。用一堆 <div class="left"> 写出来的页面，后期靠 CSS 强行重排，90% 会出可访问性或逻辑断裂问题。<p>必须做到：</p>
<ul>
<li>导航用 <code><nav></nav> 包裹，主内容用 <main></main>，页脚用 <footer></footer>，避免靠 class 名称模拟语义
position: absolute 或 flex-order 后置srcset + sizes，不能只靠 max-width: 100% —— 后者只解决“不溢出”，不解决“加载过大的图”最易被忽略的是：表格、iframe、第三方 SDK 嵌入内容，它们往往自带固定宽高和内联样式，需要单独加 wrapper 并用 overflow-x: auto 或 transform: scale() 降级兜底，不能指望它们自动响应。
