[极致用户体验] 为什么建议2022年不用“等比设计稿“+rem，而用“灵活设计稿“+px

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

最近写了3篇关于微信大字号的文章：

• 《在微信大字号模式下，网页样式乱了怎么办？》提供了一种解决方案，在用户调整微信字体大小后，可以保证网页字体大小不变，解决了样式错乱的问题。
• 《让你的网页，适配微信大字号模式！体验超好，快来收藏》介绍了几种方案，助你的网页适配微信的大字号。
• 《微信设置大字号后，iOS加载网页时闪动怎么办？》介绍了方案，解决iOS大字号模式下首屏闪动的问题。

说到大字号，我就想到了经典的面试问题：请你谈谈 rem 和 px 的区别。

重新认识em/rem和px

众所周知，em、rem是相对单位，px是绝对单位。

• px: 定义的「尺寸、距离」是固定的，不受父元素的字号影响。
• em: 在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小。
• rem: 通过相对根元素font-size的倍数来定义「尺寸、距离」。

为什么有rem

首先你要想清楚一个问题：为什么rem会出现？

十年前至五年前，在不同的手机上，你需要设置不同的字号，才能让用户看起来是正常大小。比如，电脑上16px就是正常字号。但是在手机上，分辨率高一些，需要设置24px的字号，用户才能看到正常大小。而有的手机分辨率更高，需要用32px的字号才是正常大小。如果要满足不同设备的用户，就不得不动态计算DPI，设置不同的px值。

而使用rem可以很方便的修改所有元素尺寸，每当需要修改时，只需要修改html这个根元素的font-size即可。用了rem的元素会跟随着发生变化。

rem目的是适配各种宽度的屏幕（其实微信小程序rpx就是参考rem来设计的，但是rpx则更直接的解决了问题）