移动app的适配（postcss-pxtorem+lib-flexible）

1、效果

一般页面不会随着视口变化而变化
使用lib-flexible插件，根节点会随着视口的变化而变化

image.png

iPhone 6/7/8规格 根大小是100px
切换手机规格，如下图所示，根字体大小变化了

image.png

2、lib-flexible操作步骤

（1）安装

cnpm install lib-flexible --save

(2)在vue项目中引入
在main.js文件中引入

/ /移动端适配
import 'lib-flexible/flexible.js'

（3）viewprot设置
在index.html入口文件中，设置meta的配置

3、postcss-pxtorem操作步骤

postcss-pxtorem插件是将px单位转为rem位置的插件
（1）安装

cnpm install [email protected]   -D

注：安装时，不要太高版本的，我用webpack 3.版本的，postcss-pxtorem6.0.0版本安装，因为postcss-pxtorem版本太高，报错
（2）在通过脚手架搭的项目，初始生成的.postcssrc.js文件中配置

'use strict'
module.exports = () => ({
  plugins: [
    require('autoprefixer')({
      // 浏览器兼容
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    }),
    require('postcss-pxtorem')({
      // 根大小
      rootValue: 100,
      propList: ['*']
    })
  ]
});

4、引入rem.js文件计算根大小值

在main.js同目录下新建立一个rem.js
rem.js文件代码如下：

// 蓝湖上设计稿自定义为375px (默认是iPone6/7/8的宽高)测量值直接写入即可
//当浏览器被重置大小时执行
window.onresize = function () {
  getRem(375, 100)
}
function getRem (pwidth, prem) {
  var html = document.getElementsByTagName('html')[0]
  var oWidth =
    document.body.clientWidth || document.documentElement.clientWidth
  html.style.fontSize = (oWidth / pwidth) * prem + 'px'
}
//初始加载时，执行
getRem(375, 100)

在main.js中引入rem.js文件

import './rem'

最终效果如下图

image.png