本文关键词：用rem做移动网站

前两天有个哥们找我吐槽，说找个外包做了个H5页面，看着挺美，一到客户那台旧安卓机上，字大得像砖头，按钮还点不动。我一看代码，好家伙，全是用px写死的。这哥们气得差点把电脑砸了。其实这种事儿，在咱们建站圈太常见了。很多新手或者不懂技术的甲方，总觉得px简单，直接量多少写多少，省事。但真到了上线那天，面对满屏的iPhone、小米、华为、OPPO各种奇葩分辨率，你就知道什么叫绝望了。

今天咱们不整那些虚头巴脑的理论，就聊聊为什么我强烈建议，只要做移动端，就用rem做移动网站。别嫌麻烦，前期多写两行JS，后期能少加两个班。

先说个真实的坑。去年有个客户要做个企业官网，要求适配所有手机。我刚开始图省事，用了百分比加媒体查询，看着挺像那么回事。结果测试的时候，发现一个很尴尬的问题：在屏幕很窄的小屏手机上，导航栏的文字挤在一起，根本看不清；而在大屏平板上，留白又太多，显得特别空旷。这时候我才意识到，单纯的百分比根本解决不了字体和间距的视觉比例问题。

这时候，rem就派上用场了。rem是什么？它是相对于根元素（html）字体大小的单位。什么意思呢？就是你只要定一个基准，比如html字体设为10px，那么1rem就是10px，2rem就是20px。不管屏幕多大，你只需要动态调整这个html的字体大小，整个页面的布局就会按比例缩放。

具体怎么操作？其实特别简单。核心就一句话：根据屏幕宽度，动态计算根字体大小。

比如，你可以写这么一段JS：

var html = document.documentElement;

var width = html.getBoundingClientRect().width;

html.style.fontSize = width / 7.5 + 'px';

这段代码的意思很简单，假设设计稿是750px宽，那么当屏幕宽度变化时，根字体大小也跟着变。这样，你在CSS里写1rem，在不同屏幕上代表的实际像素值是不一样的，但视觉比例永远是对的。

我见过太多人在这上面栽跟头。有人喜欢用vw单位，觉得更高级。说实话，vw确实好，兼容性也不错，但对于一些老旧的项目或者需要兼容极老安卓机的场景，rem依然是最稳妥的选择。而且，用rem做移动网站，有一个巨大的好处：维护方便。

你想改字号？不用去每个类里找px改，只要改根字体大小或者对应的rem值，全局联动。这对于后期运营调整来说，简直是救命稻草。

当然，也有人说，现在不是有Tailwind CSS吗？不是有Flexbox和Grid吗？有，当然有。但这些布局方案解决的是“位置”问题，解决不了“尺寸”和“比例”问题。特别是字体大小，它是用户感知最强烈的部分。如果字体大小不能随屏幕自适应，用户体验绝对大打折扣。

我有个朋友，之前坚持用px，结果每次换设计稿，都要重新算一遍适配，累得半死。后来听了我的建议，改成rem，虽然刚开始配置有点麻烦，但后面再也没为适配发过愁。他说，这才是真正的“一次编写，到处运行”。

还有个小细节要注意。用rem做移动网站的时候，记得把body的margin和padding归零，避免因为默认样式导致的布局错乱。另外，图片最好也配合rem或者vw来做响应式，不然图片太大或太小，都会破坏整体的和谐感。

别总觉得技术选型是小事。在移动端流量占据半壁江山的今天，适配做得好不好，直接决定了用户的留存率。你想想，如果一个用户打开你的网站，字小得看不清，或者布局乱成一团，他大概率会直接关掉，去找你的竞争对手。

所以，别再犹豫了。如果你还在为移动端适配头疼，不妨试试用rem做移动网站。虽然刚开始要写一点JS，但这份投入，绝对值得。毕竟，咱们做网站的，最终目的是为了让用户看得舒服，用得顺手，而不是为了炫技。

最后提醒一句，测试的时候，别只测自己的手机。去借几台不同品牌、不同年份的手机，尤其是那种屏幕比例奇怪的，真机测试才是王道。纸上谈兵，永远不如真机实测来得实在。

希望这篇文章能帮到正在纠结适配方案的你。如果有问题，欢迎在评论区留言，咱们一起探讨。建站这条路，咱们一起走，少走弯路。