Rem布局原理解析

在移动端页面开发中，由于设备尺寸的不同，为了适配不同分辨率的设备，我们需要用到不同的布局方法。其中，rem布局是一种比较实用的布局方案。通过本文，我们可以了解到什么是rem布局，以及如何使用rem布局。

什么是rem布局？

rem，全称为“root em”，它是相对于根元素的font-size大小来进行设置元素尺寸的单位。rem布局的原理就是通过改变其根元素的font-size大小来达到整个页面的缩放目的。

一般情况下，我们使用的rem的单位大小为root font size，即根字体大小（html标签的字体大小）。我们可以通过javascript脚本让根字体随着设备宽度的变化而发生变化，从而实现移动端适配。

rem布局的实现方式

方式一：js动态修改html根元素的font-size

function setRem(){
    var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值，（实际的750的设计图根号为50）
    var wH = window.innerHeight;// 当前窗口的高度
    var wW = window.innerWidth;// 当前窗口的宽度
    var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度，得到该宽度下的相应font-size值
    document.getElementsByTagName("html")[0].style.fontSize = rem + "px";
}

setRem();
window.addEventListener("resize",function(){
    setRem();
})

这段代码中，首先定义了一个计算rem值的函数setRem()，计算公式为 wW * whdef，具体解释如下：

• whdef是我们自定义的根元素默认比例值，本例中设为100/1920，即1920px宽设计图下，1rem=100px。
• wW是当前设备的屏幕宽度，即我们现在要适配的窗口大小。
• 计算出的rem值，在赋值给根元素html标签的font-size属性。

我们在窗口大小变化时，通过事件监听来动态的调整rem的比例值。

方式二：使用第三方库

此外，还有一种更加方便的方式，即使用第三方的库，如flexible.js、amfe-flexible.js等。

以amfe-flexible.js为例，其使用方法如下：

第一步：安装

我们可以通过npm安装该库，在终端中运行以下命令：

npm install amfe-flexible --save-dev

第二步：使用

在main.js中引入该库，并调用一次它的init()方法即可。如下所示：

import flexible from 'amfe-flexible'

flexible.init()

在引入该库之后，它会在页面渲染的时候，自动计算出一个rem的比例值，并根据该比例值来设置根元素的font-size。

注意事项

在使用rem布局的时候，需要注意以下几点：

• 根元素html必须设定font-size。
• 1rem不应该等于某个具体的像素值，而应该等于视口的宽度 所占的比例值。
• 使用rem布局时，尽可能将元素宽度、高度、间距等设置为整数类型。这是为了避免一像素问题。
• 当屏幕的横向尺寸小于375px时，可以使用fixed布局。

示例说明

示例一：使用js动态设置rem的值

设想我们有一个设计稿，宽度为750px，如何使用rem布局来进行适配呢？

首先，我们定义设计稿与rem的转换关系：1rem=100px，即baseSize = 100 / 750 * window.innerWidth;。

接着，我们可以通过如下代码来动态设置rem的值：

(function () {
    var baseSize = 100 / 750 * window.innerWidth + 'px';
    document.getElementById('html').style.fontSize = baseSize;
})()

这段代码中，我们首先将设备宽度乘以比例值，计算出一个rem的值，然后将该值通过style属性设置到根元素html上。

示例二：使用amfe-flexible库

amfe-flexible是一个流行的用于设置rem的库，下面是该库的使用方法：

1. 安装：

npm install amfe-flexible --save

1. 引入：

import 'amfe-flexible'

1. 编写：

在写页面的时候，我们可以直接在CSS文件中使用rem单位来进行页面布局：

.s-box {
    width: 2rem;
    height: 1.5rem;
    margin: 0.5rem;
    padding: 0.2rem;
    font-size: .15rem;
    line-height: .2rem;
    border-radius: .2rem;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    background: #fff;
}

在上面的代码中，我们使用了rem作为单位，这样就可以实现一个在不同设备上都具有相同尺寸的盒子了。