关于前端:极致用户体验-为什么建议2022年不用等比设计稿rem而用灵活设计稿px

37次阅读

共计 3274 个字符,预计需要花费 9 分钟才能阅读完成。

我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。

背景

最近写了 3 篇对于微信大字号的文章:

  • 《在微信大字号模式下,网页款式乱了怎么办?》提供了一种解决方案,在用户调整微信字体大小后,能够保障网页字体大小不变,解决了款式错乱的问题。
  • 《让你的网页,适配微信大字号模式!体验超好,快来珍藏》介绍了几种计划,助你的网页适配微信的大字号。
  • 《微信设置大字号后,iOS 加载网页时闪动怎么办?》介绍了计划,解决 iOS 大字号模式下首屏闪动的问题。

说到大字号,我就想到了经典的面试问题:请你谈谈 rempx 的区别

重新认识 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 缺点

  1. 在宽度较大的设施上,整体缩放的太大了。而用户的预期应该是看到更多内容。你能够浏览这篇文章《为什么 2022 年不倡议你在小程序中用 rpx》理解整体缩放的体验问题。
  2. 它的兼容性并不好,仍然存在一些问题,尤其是尺寸遇到小数点时,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-width375px(或者激进点,用 320px),即开发时保障网页在 >=375px 时均有合乎设计的布局(须要联合 flex 做好响应式适配),那么在现在的支流手机上,无论 DPI 是多少,字号都是失常展现大小。

能够参考我的网站 game.hullqin.cn 里所有页面,我设置了 bodymin-width为 320px,联合应用一些灵便的间隔(百分比实现或 flex 实现)、一些固定的间隔(px 实现),就实现了各种宽度屏幕的设施。

现在,极致用户体验 ,须要设计、前端共同努力。须要设计斗争,同时设置一些 可变的间隔 、一些 固定的间隔 不再谋求等比还原,保障设计上能适配各种宽度。须要前端致力调试,应用 flex 技术或百分比宽度,使得网页在各种宽度下的款式都合乎预期。

所以说,flexible.js也就退出了历史舞台。

为什么 flexible 退出历史舞台后,rem 也不倡议用了

如果你没有动静批改页面所有元素大小的诉求,也就没有必要用 rem 了,应该间接用 px。 想想这个场景:你看到 24px,脑海里就有印象它是多大。但你看到 1.5rem,可能还须要查一下根元素字号再算一下,这会影响开发效率。

因而,既然咱们不再须要动静批改页面内元素大小了,就间接用 px 吧。

写在最初

极致用户体验 ,须要设计、前端共同努力。须要设计斗争,同时设置一些 可变的间隔 、一些 固定的间隔 不再谋求等比还原,保障设计上能适配各种宽度。须要前端致力调试,应用 flex 技术或百分比宽度,使得网页在各种宽度下的款式都合乎预期。

我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。

正文完
 0