rem动态设置根字体需用window.innerwidth/375*100并节流，监听横竖屏；vw不能完全替代rem，混用时border应固定为1px，safe-area需viewport-fit=cover才生效。
rem布局里根字体大小怎么动态设置才不翻车
直接用 document.documentElement.style.fontSize 手动算缩放比例，是多数人踩坑的起点。问题不在 rem 本身，而在「什么时候设、依据谁来设、要不要防抖」。
常见错误现象：window.onresize 里反复重设根字号，导致页面闪动；或只在 DOMContentLoaded 时设一次，横竖屏切换后失效；更隐蔽的是：iOS Safari 的 viewport 缩放未触发 resize，但字体却因系统字号设置被强制放大。
- 推荐做法：用
viewport的width值做基准（比如设计稿宽 375px），执行document.documentElement.style.fontSize = (window.innerWidth / 375) * 100 + 'px' - 必须加节流——用
requestAnimationFrame包一层，避免高频触发；横竖屏切换用window.matchMedia('(orientation: landscape)')单独监听 - 兼容性注意：部分安卓 WebView 对
rem计算有延迟，建议初始化后主动触发一次document.body.offsetHeight强制重排
vw单位真能替代rem？哪些地方会意外失效
vw 看似简单——10vw 就是视口宽的 10%，但它和 rem 的行为逻辑完全不同，不是“换汤不换药”。
使用场景有限：适合全屏 banner、顶部导航栏高度、固定比例容器等对绝对视口依赖强的地方；但一旦涉及文字行高、内边距嵌套、或需要与 px 混用的组件（比如 border: 1px），vw 就容易失准。
- 关键差异：vw 基于视口宽度，不受缩放、字体设置、iframe 嵌套影响；而 rem 基于根元素 font-size，会被父级 transform: scale() 或 zoom 影响
- 性能影响：vw 是纯 CSS 计算，无 JS 开销；但 iOS Safari 在键盘弹出时会短暂重算 vw，造成输入框附近元素跳动
- 容易踩的坑：
font-size: 4vw在小屏上可能小于 12px，iOS 会强制最小字号为 12px，导致实际显示比预期大；需配合min-font-size（目前仅 Safari 支持）或媒体查询兜底
rem + vw 混用时，为什么padding和border总不对齐
混用的核心矛盾在于：rem 是相对单位，但它的基准（根字号）是 JS 动态写的；vw 是绝对视口单位，CSS 引擎实时解析。两者叠加时，浏览器渲染顺序和精度误差会暴露出来。
典型错误现象：按钮的 padding: 0.3rem 1vw 在 iPhone X 上左右内边距看起来不等；或者 border: 0.02rem solid #ccc 渲染成虚线或干脆不可见。
- 根本原因：0.02rem 在 375px 设计稿下约等于 0.02 × 100 = 2px，但某些设备像素比（如 2.82）会让 2px 被渲染为 1.96px → 四舍五入后变成 1px 或 0px
- 实操建议：border 统一用
1px（物理像素），不要用 rem/vw；padding/margin 若需弹性，优先选 vw，且避开小数——比如用0.5vw而非0.375vw - 调试技巧：打开 Chrome DevTools 的 Rendering 面板，勾选 “Paint flashing”，看哪些区域因单位换算频繁重绘
适配iPhone全面屏时safe-area-inset-bottom为什么没生效
写了 padding-bottom: env(safe-area-inset-bottom) 却没反应，大概率是因为漏了关键前提：viewport 必须声明 viewport-fit=cover，否则 env() 变量默认为 0。
这个值不是所有场景都该用——它只在页面内容需要贴底（如 tabbar）、且你明确控制了 body 高度时才有意义。盲目加，反而让普通安卓机多出空白。
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 必须配合 calc 使用：
padding-bottom: calc(1rem + env(safe-area-inset-bottom))，否则 rem 和 env 相加会失败 - 兼容性注意：env() 在旧版微信内置浏览器（X5 内核）中不支持，要用
@supports (padding-bottom: env(safe-area-inset-bottom))包一层降级样式
最麻烦的从来不是单位怎么选，而是不同设备对「视口」「缩放」「字体最小限制」「安全区」这四层机制的组合响应方式完全不同。一个看似简单的 1rem，背后可能触发 JS 计算、CSS 重排、viewport 重置、甚至系统级字体干预——得一层层验，不能只信文档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
