rem和vw到底该怎么选？适配方案总出问题怎么办？
最近做移动端项目，用rem适配时在不同机型上布局老是错位，换成vw又怕兼容性不好。我试了动态设置html的font-size，但效果不稳定，尤其在iPhone和安卓机上表现不一致。
比如下面这段代码，按钮宽度设为10rem，在某些手机上就明显比设计稿宽：
<div style="width: 10rem; height: 2rem; background: #007aff;">
测试按钮
</div>是不是我哪里没配置对？还是现在应该直接用vw更靠谱？
- 2
回答
38浏览
rem和vw到底该用哪个做移动端适配？
最近在做一个移动端项目，UI给的设计稿是375px宽。我之前用rem配合js动态设置html的font-size，但听说现在主流都用vw了？试了下直接写width: 50vw确实方便，但有些老机型好像...
- 1
回答
49浏览
移动端适配用 rem 还是 vw 更合适？
最近在做一个移动端 H5 项目，UI 给的设计稿是 375px 宽。我之前用的是 rem 配合 JS 动态设置根字体大小，但发现有些安卓机上字体渲染有点模糊。 听说现在很多人直接用 vw 单位做适配，...
- 1
回答
31浏览
移动端适配用 rem 还是 vw 更合适？
最近在做一个移动端 H5 项目，UI 给的设计稿是 375px 宽。我之前用的是 rem 配合 JS 动态设置根字体大小，但发现不同机型下还是有细微偏差，而且代码写起来有点麻烦。 听说现在很多人直接用...
- 2
回答
113浏览
rem适配时页面元素在不同手机上缩放比例不一致怎么办？
我用rem方案开发移动端时，设置了根字体大小根据屏幕宽度计算，但iPhone12和小米11上按钮大小明显不一样，html{font-size:50px}明明是动态计算的啊... 代码是这样写的：fun...
- 2
回答
62浏览
rem适配后为什么不同手机字体大小不一致？
我在用rem方案开发移动端时遇到个怪问题，设置了html根字体大小后，iPhoneX和华为nova9上的文字显示明显不一样大。明明都按设计图的750基准做了计算： const designWidth ...
- 2
回答
211浏览
Remax中使用Page组件时小程序正常但Web端显示空白页面怎么办？
我在用Remax开发多端应用时遇到奇怪问题，同样的Page组件在小程序端能正常渲染内容，但Web端只显示空白页面。检查过网络请求都没问题，控制台也没有报错。 尝试把页面代码简化到只剩最基础的结构还是不...
- 2
回答
124浏览
为什么用rem方案后移动端页面在不同机型下字体和间距错乱？
最近在用rem方案做移动端适配，按教程设置了html根字体大小，但发现iPhone 12和华为nova9的字体和间距显示完全不一样，1rem在nova9上显得特别大。 我按教程写了个动态计算函数： f...
- 2
回答
105浏览
rem方案中根字体大小动态计算后页面元素错位怎么办？
我按照教程用JS动态计算rem，但手机旋转屏幕后文字和图片比例不对，有时候文字太大或太小。 代码检查了好几遍没问题，是不是哪里漏了？比如这个计算函数： function setRem() { cons...
- 2
回答
57浏览
rem适配在不同机型上为啥还是错位？
我用rem做移动端适配，按照设计稿750px来设置根字体大小，但真机测试时发现iPhone和安卓显示效果不一致，有些元素明显偏移了。 我在html里动态设置了font-size，代码是这样的： fun...
- 1
回答
43浏览
rem适配在不同机型上为啥还是错位了？
我用rem做移动端适配，按照设计稿750px写的，js动态设置html的font-size，但iPhone和安卓上显示效果不一致，有些元素还是错位了。 我的基准是375px，所以用了这个脚本： con...
先检查几个关键点
第一个问题很可能是 meta viewport 没配对。如果你的 viewport 是这样的：
那问题就来了——没有限制最大宽度。在某些安卓机上，viewport 会被设置为设备物理像素宽度而不是逻辑像素宽度，导致 rem 换算基数变大，10rem 就变宽了。
正确的写法应该是加一个 maximum-scale 限制：
第二个可能的原因是你动态设置 font-size 的逻辑有问题。常见错误是用 screen.width 直接除以一个固定值，但没考虑设计稿尺寸和 dpr。
稳定的 rem 方案
其实现在用 vw 还是 rem 都可以，关键是把基础配置搞对。我给你一个经过验证的方案：
// 假设设计稿宽度是 750px
const baseSize = 75; // 750 / 10 = 75，这样 1rem = 75px
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize = baseSize * scale + 'px';
然后页面元素直接用 rem：
测试按钮
vw 方案其实更简单
vw 最大的好处是不用动态设置 font-size，兼容性现在也足够（iOS 8+、安卓 5.0+）。写法更直接：
// 假设设计稿 750px，10rem = 10 * 75px = 750px
// 换算成 vw: (750 / 750) * 100 = 100vw
width: 13.333vw; // 100px / 750 * 100
height: 2.667vw; // 20px / 750 * 100
或者用 postcss 插件自动转换，写代码时还是用 rem/vw 混合，编译后自动帮你算。
我的建议
如果你项目已经用了 rem，先把 viewport 配对 + 检查 font-size 计算逻辑，基本就能解决错位问题。如果是从零开始做新项目，用 vw 确实更简洁省心，现在兼容性完全没问题。
你把现在的 html 头部的 meta 标签和设置 font-size 的代码贴出来，我帮你看看具体哪里不对。