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

开发过小程序的人都知道，小程序的单位是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完成移动端的适配，需要固定浏览器的显示宽度不变。

Contents

首先，设置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"指定了视口的内容，它包含了多个属性设置，用逗号分隔。

具体属性的含义如下：

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

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

现在，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延伸而来，至于根目录字体大小的配置，微信开发者工具已经将这些都配置好了，你尽情用就可以了。