vue自适应处理

采用淘宝的lib-flexible的库,来做屏幕自适应处理。
rem的大小由网页根元素html决定，所以通过设置html的字体大小就可以控制rem的大小，如

html{  font-size:100px; } 
.box{ width:1rem; }  //此时 1rem = 100px

1.安装felxible库。

npm i lib-flexible --save
yarn add lib-flexible //使用yarn

2.在main.js中引入lib-flexible

import 'lib-flexible'

3.index.html中设置meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">

如果在项目中大小直接用rem，1，2，3步骤已经可以实现!

接着，我们在项目中，写css的时候将px转成rem,我们可以借助px2rem工具，
1.首先需要安装

npm i px2rem-loader --save-dev 
yarn add px2rem-loader //使用 yarn 安装

2.配置，在build/until.js中 找到 cssLoader

exports.cssLoaders = function (options) {
  options = options || {}
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader : 'px2rem-loader',
    options : {
      //这个参数是通过psd设计稿的  宽度 / 10 来计算,这里以750为标准
      remUnit : 37.5  
    }
  }
  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

放到 generateLoaders 函数中的数组 loaders

  function generateLoaders (loader, loaderOptions) {
    // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    const loaders = [cssLoader, px2remLoader];

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

重启项目，设计稿中定义多少px，就直接写多少px。