利用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;
}
}由于目前的手机有好几种尺寸，也就说明做适配需要每个尺寸都设置一个媒体查询。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
