九, VueのRem布局结合postcss-pxtorem和amfe-flexible实现Steampy市场移动端适配

基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem

1. 安装 amfe-flexible依赖 

npm install amfe-flexible --save

TIP： flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。 

2. 安装 postcss-pxtorem依赖

npm install postcss-pxtorem --save-dev

 TIP：postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。

3. 在Vue 的main.js中引入amfe-flexible 

import  'amfe-flexible';

4. vue-cli2.0  在.postcssrc.js 中配置

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

  TIP: 假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。其他比例可以自动根据转换，375 的对应 37.5，可以自己设置

 vue-cli3.0 ,在postcss.config.js中配置

  代码同上

最后重启项目编译.  看下如下代码：

.testclass {
   width: 300px;
   height: 200px;
   background: #e3e3e3;
}

在浏览器中显示

这里px,应经被转为了rem. 不同分辨率下自动会转换的。

注意： 1. 样式一定采用标签class,id等形式，才会px转为rem, 如果采用style样式不会转换

以上配置就这么多，如果还有问题，可以加入扣扣群：316567839