我是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则更间接的解决了问题）。
rem如何适配各种宽度屏幕
过后业界罕用的计划是手机淘宝开源的flexible.js。
源码很短，外围代码就是：
var docEl = document.documentElement; // 根元素，即<html></html>function setRemUnit () { var rem = docEl.clientWidth / 10; // 设置根元素的font-size，也就是1rem的大小（设置为1/10视图宽度） docEl.style.fontSize = rem + 'px';}setRemUnit();window.addEventListener('resize', setRemUnit);这样规定1rem=1/10个视图宽度，就能保障所有元素成比例了。无论手机屏幕多宽都能兼容。
rem缺点
- 在宽度较大的设施上，整体缩放的太大了。而用户的预期应该是看到更多内容。你能够浏览这篇文章《为什么2022年不倡议你在小程序中用rpx》理解整体缩放的体验问题。
- 它的兼容性并不好，仍然存在一些问题，尤其是尺寸遇到小数点时，bug较多。
现在简直所有手机浏览器都反对viewport了，flexible.js就退出了历史的舞台。
而且flexible.js作者也在2018年指出了这点：
聊聊viewport
上面这张图，列举了一些iPhone的逻辑像素Points、渲染像素Rendered Pixels、物理像素Physical Pixels、设施Physical Device：
古代开发网页，通常会在head中增加这段代码：
<meta name="viewport" content="width=device-width,initial-scale=1">- 增加这段代码前，px是渲染像素
Rendered Pixels，文字会显得特地小（随着屏幕越做越清晰，同一片设施面积内的渲染像素越来越多，文字就会越来越小）。哪怕是16px的字号，也会十分的小。 - 增加这段代码后，那么px就对应
Points，它根本跟实在机型尺寸是成比例的，不会受ppi(pixel per inch)每英寸像素的影响。此时在各种设施下，人肉眼看16px的字都是失常字号。
一些例子：
| 设施 | 视区大小（宽度 x 高度） | 设施分辨率（宽度 x 高度） | |
|---|---|---|---|
| iPhone 12 | 390 x 844 | 1170 x 2532 | |
| iPhone 12 Mini | 360 x 780 | 1080 x 2340 | |
| iPhone 12 Pro | 390 x 844 | 1170 x 2532 | |
| iPhone 12 Pro Max | 428 x 926 | 1248 x 2778 | |
| iPhone SE | 214 x 379 | 640 x 1136 | |
| iPhone 11 Pro Max | 414 x 896 | 1242 x 2688 | |
| iPhone 11 Xs Max | 414 x 896 | 1242 x 2688 | |
| iPhone 11 | 414 x 896 | 828 x 1792 | |
| iPhone 11 Xr | 414 x 896 | 828 x 1792 | |
| iPhone 11 Pro | 375 x 812 | 1125 x 2436 | |
| iPhone 11 X | 375 x 812 | 1125 x 2436 | |
| iPhone 11 Xs | 375 x 812 | 1125 x 2436 | |
| iPhone X | 375 x 812 | 1125 x 2436 | |
| iPhone 8 Plus | 414 x 736 | 1080 x 1920 | |
| iPhone 8 | 375 x 667 | 750 x 1334 | |
| iPhone 7 Plus | 414 x 736 | 1080 x 1920 | |
| iPhone 7 | 375 x 667 | 750 x 1334 | |
| iPhone 6s Plus | 414 x 736 | 1080 x 1920 | |
| iPhone 6s | 375 x 667 | 750 x 1334 | |
| iPhone 6 Plus | 414 x 736 | 1080 x 1920 | |
| iPhone 6 | 375 x 667 | 750 x 1334 | |
| iPad Pro | 1024 x 1366 | 2048 x 2732 | |
| iPad 第三代和第四代 | 768 x 1024 | 1536 x 2048 | |
| iPad Air 1 和 2 | 768 x 1024 | 1536 x 2048 | |
| iPad Mini | 768 x 1024 | 768 x 1024 | |
| iPad Mini 2 和 3 | 768 x 1024 | 1536 x 2048 |
如果咱们在开发时保障网页的min-width为375px（或者激进点，用320px），即开发时保障网页在>=375px时均有合乎设计的布局（须要联合flex做好响应式适配），那么在现在的支流手机上，无论DPI是多少，字号都是失常展现大小。
能够参考我的网站game.hullqin.cn里所有页面，我设置了body的min-width为320px，联合应用一些灵便的间隔（百分比实现或flex实现）、一些固定的间隔（px实现），就实现了各种宽度屏幕的设施。
现在，极致用户体验，须要设计、前端共同努力。须要设计斗争，同时设置一些可变的间隔、一些固定的间隔，不再谋求等比还原，保障设计上能适配各种宽度。须要前端致力调试，应用flex技术或百分比宽度，使得网页在各种宽度下的款式都合乎预期。
所以说，flexible.js也就退出了历史舞台。
为什么flexible退出历史舞台后，rem也不倡议用了
如果你没有动静批改页面所有元素大小的诉求，也就没有必要用rem了，应该间接用px。 想想这个场景：你看到24px，脑海里就有印象它是多大。但你看到1.5rem，可能还须要查一下根元素字号再算一下，这会影响开发效率。
因而，既然咱们不再须要动静批改页面内元素大小了，就间接用px吧。
写在最初
极致用户体验，须要设计、前端共同努力。须要设计斗争，同时设置一些可变的间隔、一些固定的间隔，不再谋求等比还原，保障设计上能适配各种宽度。须要前端致力调试，应用flex技术或百分比宽度，使得网页在各种宽度下的款式都合乎预期。
我是HullQin，公众号线下团聚游戏的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者HullQin受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。