「微博客」rem的作用与运用,小程序为什么用rpx为单位

发布于 2023-06-16  153 次阅读


开发过小程序的人都知道,小程序的单位是rpx,这是为什么?有什么作用呢,其实它源于rem布局,先来了解下rem的优势与工作原理。

rem布局是根据html根元素的font-size来变化的。若

html{ font-size:20px};

1rem = 20px;

然后呢,有什么作用,定完html的font-size后,元素使用rem和使用px有什么区别,不都一样么?

其实rem他的主要运用场所在移动端,移动端的设计稿一般都是iphone6为基础设计的,设计稿的宽为750px;手机的物理尺寸是375px;所以在用css的时候,设计尺寸需要除以2;要用rem完成移动端的适配,需要固定浏览器的显示宽度不变。

首先,设置meta头

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

这段代码是在 HTML 中使用 标签设置视口(viewport)的元数据。让我们逐个解释这些属性的含义:

name="viewport"指定了该 标签的名称为 viewport,用于定义视口相关的元数据。
content="initial-scale=1,maximum-scale=1, minimum-scale=1"指定了视口的内容,它包含了多个属性设置,用逗号分隔。

具体属性的含义如下:

  • initial-scale=1指定了初始缩放比例为 1,即初始状态下不进行缩放。
  • maximum-scale=1指定了最大缩放比例为 1,限制用户无法通过手势缩放进行放大。
  • minimum-scale=1指定了最小缩放比例为 1,限制用户无法通过手势缩放进行缩小。

这些属性的组合意味着视口的缩放级别被固定为 1,用户无法通过手势进行缩放操作。这在移动端网页开发中常用于保持页面的固定布局和尺寸,以确保页面显示的一致性和可控性。

其次,JS动态设置根目录的字体大小

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

然后,设计稿的尺寸除以100,得到相应的rem值

现在,7.5rem == 100%屏幕宽度 (也对应着设计稿中的750px为100%宽度)。

只用rem作为单位的话,具体显示设备的屏幕宽度是多少已经可以不用考虑了,总之是7.5rem就是全宽,可以让各种不同的设备的显示效果保持一致。

比如,我在设计稿上量到宽367px的大小,那么css里可以直接写width: 3.67rem

(以375px宽手机为例)第二步js设置的html字体大小为:375px除以7.5得50px;
7.5rem乘以50px得到的是375px刚好是屏幕的满宽。

也就是说,不论手机屏幕宽度多少,7.5rem永远能占屏幕的满宽。这样,在宽屏手机里,元素能够等比例放大一些,实现各类机型的适配,也方便了前端编码。

而做过小程序的人都知道,小程序不论任何机型,屏幕满宽都是750rpx,其实也就是从7.5rem延伸而来,至于根目录字体大小的配置,微信开发者工具已经将这些都配置好了,你尽情用就可以了。

相关资料

移动端适配问题,选vw还是rem?还是其他方式?

——转自雅雅的前端工作学习,有增改。


A Student on the way to full stack of Web3.