昨晚加班到两点，盯着后台数据发呆。有个做本地家政的小老板找我，说网站在手机上看乱成一锅粥，按钮都点不到。我一看代码，好家伙，全是px写死的。这年头，谁还拿px去硬扛移动端啊？
咱们干建站的都知道，现在手机屏幕花样多得很。从4.7寸到6.7寸，还有折叠屏，分辨率更是五花八门。你要是用px定死宽度，在iPhone SE上看着挺正常，到了大屏安卓机上，字小得像蚂蚁；反过来，在小屏上，内容又溢出来，用户得左右滑动才能看完，这体验简直烂透了。
所以我一直跟徒弟们强调，用rem做移动网站，才是正解。
rem是什么？它是相对于根元素字体大小的单位。根元素是html标签。只要控制好html的font-size，剩下的元素跟着比例缩放，这就叫响应式。
很多新手怕麻烦，觉得写媒体查询（Media Queries）太累。其实真不累。你只需要在页面加载时，算一下当前屏幕宽度，然后给html设个font-size。
举个真实的例子。我上个月给一个做装修的公司改版。之前用的自适应布局，代码写得像 spaghetti（意大利面），乱七八糟。后来我重构，直接上了rem方案。
逻辑很简单：假设设计稿是750px宽。我们规定，当屏幕宽度为750px时，html的font-size设为100px。这样，1rem就等于100px。设计师标注的100px，我们在代码里写1rem。如果屏幕变窄，变成375px，也就是屏幕宽度减半，那html的font-size就自动变成50px。这时候，1rem就等于50px。
你看，元素的大小跟着屏幕比例走了。不管用户拿什么手机打开，页面布局都是和谐的。
有人问，那字体怎么办？字体也按比例缩放。不过，字体太小了看着累，所以一般有个下限。比如，当屏幕小于320px时，font-size不再按比例缩小，就固定在某个值，比如14px。这样保证文字可读性。
我常跟客户说，别总想着用那些复杂的JS库去处理适配。原生JS几行代码就能搞定。
`javascript
(function() {
var docEl = document.documentElement;
var width = docEl.clientWidth;
if (width > 750) width = 750;
if (width < 320) width = 320;
docEl.style.fontSize = (width / 750 * 100) + 'px';
})();
`
这段代码，加在head里，完事。不用引入任何依赖，加载速度快得飞起。对于SEO来说，速度就是命。百度爬虫喜欢加载快的网站。
当然，用rem做移动网站也有坑。最大的坑就是，设计师给的标注是px，你得自己换算成rem。比如标注是20px，你就写0.2rem。这有点麻烦，但为了适配效果，值了。
现在有很多构建工具，比如PostCSS，可以自动把px转rem。你写代码时直接写px，构建时自动转换。这样既省事，效果又好。强烈推荐大家试试。
我见过太多网站，为了省事，用百分比做宽度，高度却用px定死。结果一拉伸，图片变形，布局崩坏。用rem的话，宽度和高度都按比例缩放，整体协调。
还有个细节，viewport的设置。一定要加上 initial-scale=1, maximum-scale=1, user-scalable=no。虽然现在很多浏览器允许用户缩放，但为了保持设计初衷，还是锁死缩放比较好。当然，这也看产品需求，如果是新闻类网站，允许缩放可能更好。
总之，用rem做移动网站，不是赶时髦，是刚需。它简单、高效、兼容性好。别再去纠结那些花里胡哨的框架了，回归基础，把rem玩透，你的网站适配问题就解决了一大半。
我那个家政老板，改完代码后，手机上看页面清爽多了。他高兴得请我喝了杯咖啡。虽然咖啡不好喝，但心里舒坦。
兄弟们，代码这东西，越简单越稳定。别整那些虚的。老老实实用rem，把细节抠好，用户自然会用脚投票。
最后再啰嗦一句，测试一定要多机型测试。模拟器再好，也不如真机看着直观。拿你自个儿的手机，再借同事的安卓机，打开看看。如果有问题，赶紧改。别等上线了再后悔。
记住，用户体验无小事。每一个像素的偏差，都可能流失一个客户。用rem做移动网站，虽然前期多花点心思，但后期省心省力。这笔账，怎么算都划算。
好了，今天就聊到这。有啥问题，评论区见。咱们下期接着聊。
