携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情。
重新认识em/rem和px
众所周知，em和rem是相对单位，px是绝对单位。
用px定义的「尺寸、距离」是固定的，不受父元素的字号影响的。
而em是通过相对父元素font-size的倍数来定义「尺寸、距离」。rem是通过相对根元素font-size的倍数来定义「尺寸、距离」。
也就是说：
- 如果你用了px定义
font-size以外的样式，例如width、padding等，那么用户改变微信字号时，它不会变。 - 如果你用了em或rem定义样式，那么它就会跟随用户微信设置的字体大小改变。
启发1：合理的使用em与px
有人说，网页中全都应该用rem。也有人说，网页中全都应该使用px。
先不争论，因为这完全取决于产品诉求。我们分析下两者在微信浏览器中放大字号的后果：
| 方案 | 优点 | 缺点 |
|---|---|---|
| 全用rem | 字体放缩，画面比例保持不变 | 大字号模式下，空隙会占有大多数空间，手机空间没有充分利用 |
| 全用px | 大字号模式下，空隙不变，字体放大，空间利用率更高 | 画面比例变了；需额外关注固定尺寸的容器 |
这取决于产品诉求，你的产品是期望画面比例不变？还是空间充分利用？
写在最后
我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。