rem屏幕适配及px转rem

屏幕适配

在vue项目中的index.html页面head标签内插入这段代码：

(function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
  		//动态改变body宽度以自适应浏览器可见区域的变化
		document.getElementById("html").style.width = (clientWidth) + "px";
		document.getElementById("body").style.width = (clientWidth) + "px";
		//document.getElementById("app").style.width = (clientWidth) + "px";
          if (!clientWidth) return;
  		//设计图宽度为1920px，这里1rem即为16px
        docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
        };

      	if (!doc.addEventListener) return;
		//监听屏幕的改变
      	win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

测试：
在vue项目中安装css与less（这里可选安装，与屏幕适配关系不大，主要用来测试适配）
npm install --save-dev less less-loader
npm install --save-dev style-loader css-loader
在 build/webpack.base.conf.js 里面的module.exports 里的 module 里添加下面这段配置：

{
    test: /\.less$/,
    use: [
      "style-loader",
      "css-loader",
      "less-loader"
    ]
}

新建模块 headers：

<template>
    <div class="box"> <p>header</p> </div>
</template>

<script>
export default {
  name: "headers",
  data() {
    return {};
  }
};
</script>

<style scoped lang="less">
.box {
  height: 6rem;
  width: 4rem;
  background-color: red;
  font-size: 0.5 rem;
}
</style>

px转rem

1）安装px2rem插件
npm install px2rem-loader
2）配置
webpack.base.conf.js > 在module> rules 下添加：

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
}

2）找到utils.js这个文件 在cssloader 后面加入：

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 16 // 16px = 1rem
      remPrecision: 8 // rem的小数点后位数
    }
  }

再然后把这行：

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

替换成这个：

const loaders = [cssLoader , px2remLoader];

注意：这里16px = 1rem 最好与前面index.html中的对应。