[极致用户体验] 为什么建议2022年不用"等比设计稿"+rem，而用"灵活设计稿"+px
HullQin -![[极致用户体验] 为什么建议2022年不用"等比设计稿"+rem，而用"灵活设计稿"+px](https://www.gybworld.com/upload/pic/o/1663095603xKBCt.jpg)
最近写了3篇关于微信大字号的文章：
《在微信大字号模式下，网页样式乱了怎么办？》提供了一种解决方案，在用户调整微信字体大小后，可以保证网页字体大小不变，解决了样式错乱的问题。《让你的网页，适配微信大字号模式！体验超好，快来收藏》介绍了几种方案，助你的网页适配微信的大字号。《微信设置大字号后，iOS加载网页时闪动怎么办？》介绍了方案，解决iOS大字号模式下首屏闪动的问题。说到大字号，我就想到了经典的面试问题：请你谈谈 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则更直接的解决了问题）。
当时业界常用的方案是手机淘宝开源的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年指出了这点：
下面这张图，罗列了一些iPhone的逻辑像素Points、渲染像素Rendered Pixels、物理像素Physical Pixels、设备Physical Device：
现代开发网页，通常会在head中添加这段代码：
<meta name="viewport" content="width=device-width,initial-scale=1">Rendered Pixels，文字会显得特别小（随着屏幕越做越清晰，同一片设备面积内的渲染像素越来越多，文字就会越来越小）。哪怕是16px的字号，也会非常的小。添加这段代码后，那么px就对应Points，它基本跟真实机型尺寸是成比例的，不会受ppi(pixel per inch)每英寸像素的影响。此时在各种设备下，人肉眼看16px的字都是正常字号。一些例子：
设备视区大小（宽度 x 高度）设备分辨率（宽度 x 高度） iPhone 12390 x 8441170 x 2532iPhone 12 Mini360 x 7801080 x 2340iPhone 12 Pro390 x 8441170 x 2532iPhone 12 Pro Max428 x 9261248 x 2778iPhone SE214 x 379640 x 1136iPhone 11 Pro Max414 x 8961242 x 2688iPhone 11 Xs Max414 x 8961242 x 2688iPhone 11414 x 896828 x 1792iPhone 11 Xr414 x 896828 x 1792iPhone 11 Pro375 x 8121125 x 2436iPhone 11 X375 x 8121125 x 2436iPhone 11 Xs375 x 8121125 x 2436iPhone X375 x 8121125 x 2436iPhone 8 Plus414 x 7361080 x 1920iPhone 8375 x 667750 x 1334iPhone 7 Plus414 x 7361080 x 1920iPhone 7375 x 667750 x 1334iPhone 6s Plus414 x 7361080 x 1920iPhone 6s375 x 667750 x 1334iPhone 6 Plus414 x 7361080 x 1920iPhone 6375 x 667750 x 1334iPad Pro1024 x 13662048 x 2732iPad 第三代和第四代768 x 10241536 x 2048iPad Air 1 和 2768 x 10241536 x 2048iPad Mini768 x 1024768 x 1024iPad Mini 2 和 3768 x 10241536 x 2048如果我们在开发时保证网页的min-width为375px（或者保守点，用320px），即开发时保证网页在>=375px时均有符合设计的布局（需要结合flex做好响应式适配），那么在如今的主流手机上，无论DPI是多少，字号都是正常展示大小。
可以参考我的网站game.hullqin.cn里所有页面，我设置了body的min-width为320px，结合使用一些灵活的距离（百分比实现或flex实现）、一些固定的距离（px实现），就完成了各种宽度屏幕的设备。
如今，极致用户体验，需要设计、前端共同努力。需要设计妥协，同时设置一些可变的距离、一些固定的距离，不再追求等比还原，保证设计上能适配各种宽度。需要前端努力调试，使用flex技术或百分比宽度，使得网页在各种宽度下的样式都符合预期。
所以说，flexible.js也就退出了历史舞台。
如果你没有动态修改页面所有元素大小的诉求，也就没有必要用rem了，应该直接用px。 想想这个场景：你看到24px，脑海里就有印象它是多大。但你看到1.5rem，可能还需要查一下根元素字号再算一下，这会影响开发效率。
因此，既然我们不再需要动态修改页面内元素大小了，就直接用px吧。
极致用户体验，需要设计、前端共同努力。需要设计妥协，同时设置一些可变的距离、一些固定的距离，不再追求等比还原，保证设计上能适配各种宽度。需要前端努力调试，使用flex技术或百分比宽度，使得网页在各种宽度下的样式都符合预期。
我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
Tags 标签
前端javascripthtml5程序员扩展阅读
HTML5离线存储
2020-03-06 14:13:06 []CSGO电竞API数据接口【West S2战队数据】分享使用演示
2020-09-03 07:18:05 []wamp配置局域网访问
2020-09-04 01:12:17 []接口测试工具apipost3.0版本对于流程测试和引用参数变量
2020-09-15 15:12:13 []vs code的使用与常用插件和技巧大全总结
2020-09-17 03:07:47 []没有伞的孩子 [必须] 要学会奔跑
2020-09-17 04:49:49 []学习之apipost3.0文档移动和文档管理教程
2020-09-18 06:19:35 []分享—如何使用apipost模拟手机实现请求发送
2020-09-18 12:15:00 []【分享】apipost如何使用mock测试
2020-09-19 21:59:25 []加个好友，技术交流
