利用css实现移动端rem适配

rem适配原理

为了让一些不能等比自适应的元素，到达当设备尺寸发生改变的时候，等比例适配当前设备。根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体变化元素尺寸也会发生变化，从而达到等比缩放的适配。

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。

rem.js的实现

一直以为rem的实现是靠JS实现，网上的rem.js五花八门，少的10多行代码，多的甚至上百行，其中一个在使用过程中在安卓和苹果中的大小居然不一样，苹果被缩小了二倍。比如:

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 这里的750 取决于设计稿的宽度
                if (clientWidth >= 750) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('domContentLoaded', recalc, false);
})(document, window);

这里的1rem=100px。个人觉得利用css就能实现rem.js一样的效果，相比更简单使用，下面就介绍几种css的实现方法。

方案一：利用css的vw单位

在css中定义html的font-size为：calc(100vw/3.75)，calc、vw能兼容ios8+和android4.4+，可放心使用，如下：

html {
  font-size: calc(100vw/3.75);
}

然后在css中，就可以将所有的px单位除以100，得到rem单位了。如果不使用calc属性，可以直接写成：

html {  font-size: 26.66667vw; }

屏幕标准宽375px，全部宽度是100vw，即：

100vw / 375px = 0.2666667 vw/px

也就是每像素0.2666667vw。为调试时便于换算，我们设定1rem = 100px, 即 1rem = 26.66667vw。这个值也可根据自己需要调整数值。

当然如果你还想再方便点，也可以在css代码里直接用px做单位，然后使用postcss-pxtorem这个工具在webpack构建时将px转为rem单位。这样写代码时照着UI图的标注直接写像素值就行了。配置如下：

{
        loader: 'postcss-loader',
        options: {
            plugins: [
                require('postcss-pxtorem')({rootValue: 100, propList: ['*']})
            ]
        }
}

大家也可以使用px2rem这个插件完成，webpack、vscode都能支持，同样设置时将rootFontSize 设为100即可。

方案二：使用meta标签

在html的head中插入下面的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">

没错，是两个viewport标签。width=device-width写在上面，width=375写在下面，375就是以哪个设备宽度为基准，现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签，后面的css就可以完全使用px为单位直接使用，整个页面会自动按设备宽度进行等比例缩放。

方案三：利用媒体查询

通过媒体查询，我们让css检测到浏览器视窗的展示尺寸，然后根据不同的浏览器视窗尺寸设置不同的样式，进而实现了同一套代码适应不同设备的功能。

@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}

由于目前的手机有好几种尺寸，也就说明做适配需要每个尺寸都设置一个媒体查询。

链接: https://www.fly63.com/article/detial/12208