rem布局的原理

一、什么是rem?

rem是相对于html的单位，rem可以实现响应式布局

二、rem实现原理？

根据获取视口的宽度clientWidth，然后/7.5+px，addEventListener监听load，去执行change方法

//说明：100px=1rem
<script>
        (function (win, doc) {
            var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';//orientationchange：移动端存在的监听事件
            function change() {
                var html = doc.documentElement;
                var width = doc.documentElement.clientWidth || win.innerWidth
                html.style.fontSize = width / 7.5 + 'px';
                // 除以的数字根据效果图给的基准（一般移动端效果图750px、PC端1440px），得到一个相对容易计算的数值，就可以进行rem的使用了 
            }
            change();
            win.addEventListener(resize, change, false);
            win.addEventListener('load', change, false);
            doc.addEventListener('DOMContentLoaded', change, false);
        })(window, document);
    </script>

三、Vue项目中使用rem.js

1. 新建rem.js文件
2. 在main.js中引入，Vue.use(rem)，或者放到index.html最上面的head

四、Vue使用lib-flexible+ px2rem-loader

1. 下载lib-flexible

npm install lib-flexible --save-dev

2. main.js中引入

// px2rem 自适应
import 'lib-flexible'

3. 安装 px2rem-loader

npm install px2rem-loader --save-dev

4. 配置px2rem-loader
   4.1在build/utils.js中，找到exports.cssLoaders

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75  //以设计稿750为例， 750 / 10 = 75
    }
  }

4.2 在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }