rem适配必须动态设置根字体大小，因rem是相对于html font-size的相对单位，静态媒体查询难覆盖全机型；需用JS根据screen.width或clientWidth计算并设置documentElement.style.fontSize，如750px设计稿下iPhone 12设为52px；vw可替代但存在iOS键盘缩放、安卓舍入误差等问题；混用px/rem易致UI组件失真，viewport meta缺失会导致计算基准错误。rem适配为什么必须配合根字体大小动态计算不改html元素的font-size，rem就只是个固定倍数单位，和px没本质区别。移动端屏幕宽度千差万别，靠CSS媒体查询写死几档font-size既难覆盖全面，又容易在中等尺寸设备上断层。实际做法是用JS在页面加载初期读取window.screen.width或document.documentElement.clientWidth，算出比例后直接设置document.documentElement.style.fontSize。常见方案是按750px设计稿等比缩放：比如iPhone 12（390px宽）对应390 / 750 * 100 = 52px，那么1rem就≈52px。别用window.innerWidth------横竖屏切换时它不触发重排，值可能滞后初始化时机要早，最好放在<head>里的内联脚本，避免FOUC（闪动）记得监听resize和orientationchange，但别高频触发，加节流vw单位能替代JS计算rem吗能，但有兼容和精度问题。100vw始终等于视口宽度，所以html { font-size: 3.75vw; }在750px设计稿下刚好是28.125px（750×0.0375），接近常用基准值。这确实省了JS逻辑。问题在于：iOS Safari在唤起键盘时会把vw按"视觉视口"计算，导致font-size骤然缩小；安卓部分浏览器对小数vw渲染有舍入误差，连续嵌套rem会放大偏差。立即学习"前端免费学习笔记（深入）"； WisPaper 复旦大学研发的AI学术搜索工具，5分钟内筛选1000篇论文
相关推荐
IvorySQL2 分钟前
PostgreSQL 日报｜复制槽泄漏修复（8 月 6 日）XWalnut3 分钟前
MySQL入门到精通老白干8 分钟前
基于 Spring AOP 的操作日志记录：以 DeptController 增删接口为例John jj16 分钟前
拆解 Telegram 群组频道收录市场：三类方案，一个可运行的评分模型，目前TG中文人工评分加模型评分机制——LetsTG收录“快速”、“无门槛”@Mike@19 分钟前
07-数据库学习笔记（数据库哈希表）喜欢的名字被抢了27 分钟前
FastAPI 接入异步 PostgreSQL 完成任务 CRUD 与数据库迁移aqi0028 分钟前
15天学会AI应用开发（十九）使用LangGraph实现持久记忆功能月光船幽幽34 分钟前
KDTree查表实现观测到动作的统计映射2401_8685347836 分钟前
论信息系统安全保障规划与设计