vue移动端适配方案

一、flexible.js实现适配

flexible.js+rem进行移动端适配
先利用vue脚手架创建vue项目

1. npm install -g
2. vue-cli vue init webpack my-project
3. cd my-project
4. npm run dev
   1、安装插件 lib-flexible

npm i lib-flexible --save-dev

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

import 'lib-flexible/flexible'

接下来把public文件夹中的index.html页面中的meta，name=viewport标签去掉，因为这个标签的作用flexible可以去自动完成。
3、安装安装专门用来自动计算rem的插件
选择安装下面其中一种即可，推荐第一种
（1）安装px2rem loader

npm install px2rem-loader --save-dev

配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

同时，在generateLoaders方法中添加px2remLoader

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

（2）安装postcss-pxtorem

npm install postcss-pxtorem --save

在项目目录下的postcss.config.js添加配置代码

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem':{
        //设计稿对应的rem尺寸，此时是iPhone6对应的75px
      rootValue:75,
        //所有元素的px自动转化成rem
      propList:['*']
    }
  },
};

大写的PX不会被转换成rem，适合边框使用

1、 lib-flexible：是 rem 的适配插件。（例：750px == 10rem）
2、px2rem-loader ：是为了方便在书写CSS时，输入 px 会 自动转为 rem。
3、有时 用 ‘px2rem-loader ’ 插件，发现 rem 转换不正确。

二、rem实现适配

在主入口：index.html， 标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。）

  <script>
    (function () {
      // 在标准 375px 适配下，100px = 1rem;
      var baseFontSize = 100;  
      var baseWidth = 375;
      var set = function () {
        var clientWidth = document.documentElement.clientWidth || window.innerWidth;
        var rem = 100;
        if (clientWidth != baseWidth) {
          rem = Math.floor(clientWidth / baseWidth * baseFontSize);
        }
        document.querySelector('html').style.fontSize = rem + 'px';
      }
      set();
      window.addEventListener('resize', set);
    }());
  </script>