vue中使用rem适配不同屏幕

一、手动转换

1、新建rem.js文件

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            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);

这段代码的大意是：
如果页面的宽度超过了750px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 750)

注：如750的设计图测量为700px，则css中写7rem即可

2、在main.js中引用

import './common/rem.js'

找到你rem.js的文件路径，引用后即可使用rem为单位

二、自动转换

1、安装插件

npm install  px2rem-loader  lib-flexible --save 

2、引入插件

import 'lib-flexible/flexible.js'

3、修改配置
在build下的 utils.js中，找到generateLoaders 方法，在这里添加

const cssLoader = {
  loader: 'css-loader',
   options: {
     sourceMap: options.sourceMap
   }
 }

 const px2remLoader = {
   loader: 'px2rem-loader',
   options: {
     remUnit: 192  //比例为10/1
   }
 }
 
function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }

4、如需适配pc端
找到flexible.js文件，把字号54的限制取消

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

5、添加index.html

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

三、自动转换
注：使用px2rem-loader、lib-flexible插件

1、安装插件

npm i lib-flexible -S
npm i px2rem-loader -D

2、引入

import 'lib-flexible/flexible'

3、修改.postcssrc.js文件

module.exports = {
  'plugins': {
    'postcss-px2rem-exclude': {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
}
//是为了将px转rem的时候，忽略掉node_modules 下的文件夹

4.因为第三方ui框架的css是基于data-dpr为1的时候所编写，所以需要

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