通过rem实现的移动端网页高效开发

说明

移动端网页开发在网上可以找到很多种开发方案，本篇博文记录的是采用rem来开发移动端网页的一些过程。

rem

首先，在css当中的单位分为两大种，一种是绝对单位，一种是相对单位。例如常用的px就是绝对单位，而本篇文章所用的rem则为相对单位。
下面列出了一些常见的绝对单位和相对单位。

绝对单位：

• px
• in
• pt
• mm
• cm
• …

相对单位：

• em
• rem
• vw
• vh
• …

绝对单位一般来说是一个固定的值，该多少就是多少。就好比生活种小明有1000块，那么这1000块是实打实的1000块。而相对单位则需要参考，例如小红的钱为小明钱的50%，此时对于小红来说，她具体有多少钱呢，想要知道就需要先弄清楚小明到底有多少钱。

rem就是一个相对单位，它需要以根元素html 的字体大小作为参考。

例如，html的font-size值为10px，那么1rem就等于10px。

html {
	font-size: 100px;
}

div {
	width: 2rem; /*相当于 2 * 100 = 200px*/
	height: 1rem; /*相当于 1 * 100 = 100px*/
}

也就是说，如果通过rem来开发网页，将css当中使用的单位设置为rem，那么只要根元素html的字体大小发生变化，那么网页里面的元素会因为使用了rem作为单位也会跟着发生变化。

例如屏幕的宽度变大，就可以将根元素html的font-size相应的变大，那么网页里面的元素自然而然的就会变得更大一些，从而适合于更大的屏幕。

所以在弄懂了rem之后，下面就要来说说如何动态的设置网页根元素html的font-size值。

动态设置网页根元素的字体大小

想要让字体大小能够根据屏幕宽度的变化而动态的变化，需要知道两个值，一个是用户的屏幕宽度，第二个是在开发移动端网页时的参照屏幕。

获取用户的屏幕宽度，可以通过下面的js代码来实现：

document.documentElement.clientWidth

而第二个值一般来说要根据实际的开发需求，例如开发时的参照设备是iphone8 plus,那么屏幕的宽度就是414，如果开发时参照的设备是iphone 6、7、8,那么参照的屏幕宽度就是375。

而在本篇文章当中，采用的屏幕宽度为375，也就是iphone 6、7、8为参照设备。

在知道了用户屏幕宽度和项目的参照屏幕宽度之后，就可以计算出两个屏幕宽度的比例。

document.documentElement.clientWidth / 375 

在得到屏幕比例之后，就可以将屏幕宽度在375下的根元素字体大小的值乘以这个比例，就是在用户屏幕下的根元素html的font-size值。

例如，在开发中，屏幕宽度为375时的根元素html的字体大小为20px，那么在用户屏幕下的根元素字体大小就为：

20 * (document.documentElement.clientWidth / 375 )

将上面的代码稍微的整理一下，再加上事件的监听，就可以实现动态的设置根元素html的font-size值。

代码如下：

(function(global){
    function remChange(){
        var d = document.documentElement;
        var winW = d.clientWidth;
        if(winW>=640){
            d.style.fontSize = '40px'
        }else{
            d.style.fontSize=20*winW/375+'px';
        }
    }
    remChange();
    global.addEventListener('resize',remChange,false);
    global.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            remChange();
        }
    })
})(window);

文章到了这，已经说清了rem的使用以及如何动态的设置网页根元素html的font-size值，但是如果你想要更加快速的开发移动端网页，那么就仍然需要阅读下面的内容。

dpr 和 移动端网页设计稿

在开发移动端网页的时候，需要知道的一个值是设备的dpr。dpr表示的是设备像素和逻辑像素的比值，例如iphone6 的逻辑像素宽度为375,而设备像素宽度为750，而iphone6的dpr就等于750(设备像素) / 375(逻辑像素) = 2。

在这里不去对相应的屏幕概念进行阐述，本篇文章主要讲解的还是如何更快更好的开发移动端的网页。

一般来说，移动端网页的设计稿的宽度都是等于参照设备的设备像素,也就是设备的物理像素，而在开发网页的时候则需要遵照逻辑像素，这个时候就出现了一个问题，以参照机型为iphone6为例，设计稿的宽度为750px, 而实际开发的时候设备的宽度为375px，此时，如果想要将设计稿中的内容准确的显示在移动端网页当中，就需要将测量到的元素的尺寸除以2(dpr)，才可以得到元素的逻辑像素值。

而如果想要使用rem为单位，让移动端网页元素能够根据屏幕宽度的变化而变化，那么在每一个元素设计值的时候就需要进行两个步骤的运算，先将测量到的值除以dpr，然后再来将得到的元素逻辑像素值(单位为px)转换到rem。这样在开发网页的时候会变得异常繁琐。

通过gulp插件将px自动转换为rem

为了减少在开发移动端网页时的繁琐计算，在本篇博文中将通过gulp当中的插件px3rem来解决这个问题。

在这里省略了gulp的安装和其他配置，仅仅说明如何通过gulp插件px3rem来将px转换为rem。

关于gulp的插件px3rem详细内容，可以点击这里查看更多详细的说明。

在gulpfile.js当中，可以通过下面的代码来进行设置：

const px2rem = require('gulp-px3rem'); // 引入相应的插件

...

gulp.task('less', function () {
    gulp.src('public/less/*.less')
  		...
        .pipe(px2rem({
            remUnit: 40,
            remPrecision: 6
        }))
        ...
});

...

在上面的代码中，给px3rem这个插件设置了两个参数，remUnit表示rem参考的字体大小，正常情况下设置的值应和根元素的字体大小相同，例如上面说到的20px,但是为了抹平dpr导致的2倍关系，所以在这里直接设置成了40。

这样做的好处是可以直接将设计稿中测量出的值写到代码里，例如设计稿中量出的宽度为100px，那么代码中写的值就是100px，这样就省去了繁琐的计算问题。

使用

首先可以将上面说到的动态更改根元素html的font-size的js代码存储到一个叫rem.js的文件中，在后续的每次移动端网页开发中都引入进来，这样就不再需要每次都手动设置html的font-size值了。

然后在gulp的配置文件中设置好上一个小节提到的插件px3rem的相应参数，然后监听less即可。 这样一系列的设置下来，就可以在开发的时候，将测量出来的尺寸直接写在代码中，不需要开发者进行任何的计算。

当然，别忘了设置viewport。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui, viewport-fit=cover">。

总结

在本篇文章中，讲解了通过rem开发移动端网页的一些事，部分内容适当的进行了省略，也有些内容或许不太严谨，但是还是希望本篇文章对你有所帮助和启发。