[极致用户体验] 为什么建议2022年不用"等比设计稿"+rem,而用"灵活设计稿"+px
Posted HullQin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[极致用户体验] 为什么建议2022年不用"等比设计稿"+rem,而用"灵活设计稿"+px相关的知识,希望对你有一定的参考价值。
背景
最近写了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 噢~我有空了会分享做游戏的相关技术。
以上是关于[极致用户体验] 为什么建议2022年不用"等比设计稿"+rem,而用"灵活设计稿"+px的主要内容,如果未能解决你的问题,请参考以下文章
华为云API中心:汇聚千行百业API资产,打造API全生命周期极致体验
EcoSaaS周四见追求极致用户体验,EcoSaaS生态平台懂你
[极致用户体验] 我做的《联机五子棋》是如何追求极致用户体验的?(下)