h5针对移动端适配问题

h5项目需要对移动端不同尺寸的屏幕进行适配，网上有很多种方案，下面采取了淘宝的适配方案

引入适配方案

（1）通过cnpm install amfe-flexible安装第三方包
（2）在main.js中import 'amfe-flexible'全局引入第三方包

淘宝适配方案是对不同屏幕下的动态设置根元素字体大小，然后可以配合rem实现对尺寸的动态控制，也可以在通过px转rem插件来实现。

postcss插件

（1）通过npm install postcss-pxtorem -D安装第三方包
（2）然后在项目的根目录创建postcss.config.js文件并进行一下配置：

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*']
    }
  },
}

（3）然后页面中可以使用px单位，在项目打包时会通过插件自动转换成rem单位。

通过淘宝适配方案和pxtorem插件可以对不同屏幕下的设备完美适配。