viewport标签必须置于最前面，否则浏览器按默认视口（如980px）渲染导致闪屏；rem计算需在viewport设置后动态执行，且clientwidth取值须防抖、避坑、统一基准。
必须先设 viewport，再动态算 rem；否则 document.documentElement.clientWidth 拿到的不是真实视口宽度，所有缩放都会错。
为什么 viewport 标签必须放在
浏览器解析 HTML 是从上到下流式渲染的。如果 viewport 标签被 CSS 或 JS 阻塞（比如后面跟着一个外链 <link rel="stylesheet">），早期渲染阶段会按默认布局视口（通常是 980px）开始排版，造成「闪屏」或文字突然缩放 —— 尤其在 iOS Safari 上非常明显。
常见错误写法：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 放在 <link> 或 <script></script> 后面<meta> 的 content 缺少 initial-scale=1.0，导致安卓 WebView 初始渲染比例不一致
- 正确位置：紧贴
开始，且早于任何外部资源引用 - 必须包含
width=device-width和initial-scale=1.0，二者缺一不可 - 如需禁止用户缩放，可加
user-scalable=no，但注意无障碍合规风险
rem 动态计算中 clientWidth 取值的三个关键点
document.documentElement.clientWidth 是计算 rem 的核心依据，但它不是“屏幕物理宽度”，而是当前布局视口的 CSS 像素宽度。这个值受 viewport 设置直接影响，也受横竖屏切换、软键盘弹出等干扰。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要用
window.innerWidth：它包含滚动条宽度，且在某些安卓 WebView 中返回异常值 - 避免在 DOMContentLoaded 之前执行：此时
document.documentElement可能未就绪，返回 0 - 监听
resize时要防抖：频繁触发会导致font-size抖动，建议节流至 100ms 以上 - 横屏切换后，部分 Android 机型不会触发
resize，需额外监听orientationchange
设计稿宽度为 750px 时，rem 基准值设成 100 还是 16？
设成 100 是行业惯例，不是技术强制要求，但能极大降低换算成本 —— UI 标注的 75px 直接写成 0.75rem，不用心算除以 16。
真正影响体验的是「缩放上限」。例如：
function setRem() {
const designWidth = 750;
const baseFontSize = 100;
const maxWidth = 750; // 超过此宽度不再放大
const clientWidth = document.documentElement.clientWidth;
const fontSize = (clientWidth / designWidth) * baseFontSize;
document.documentElement.style.fontSize = Math.min(fontSize, baseFontSize) + 'px';
}
- 不设
maxWidth：平板或横屏手机上字体/按钮可能大得离谱 - 设成
16：虽然语义更“标准”，但换算时要反复除以 16，易出错且难维护 - 基准值一旦选定，全项目 CSS 必须统一，不能混用 100 和 16
Flex/Grid 布局与 rem 单位的协作边界在哪
rem 解决的是「尺寸缩放一致性」，Flex/Grid 解决的是「空间分配逻辑」。两者不是替代关系，而是分层配合：用 rem 控制文字、边距、圆角等基础度量，用 Flex/Grid 控制容器内子项的排列方式和响应行为。
- 别用
rem写flex-basis：比如flex: 0 0 2rem在小屏下可能挤成一条线，应改用min-width: 2rem+flex: 1 - Grid 的
grid-template-columns推荐用fr或minmax()，而非rem固定列宽 - 媒体查询断点仍建议用
px（如@media (max-width: 768px)），因为断点是设备能力判断，不是视觉尺寸映射
最常被忽略的一点：rem 计算只影响根字体大小，但 line-height、letter-spacing 等继承属性不会自动重算 —— 如果你写了 line-height: 1.5，它始终是相对于当前 font-size 的倍数，这是对的；但如果你写了 line-height: 24px，那就和 rem 体系脱钩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
