vue-cli使用postcss-pxtorem和amfe-flexible适配移动端屏幕

安装依赖

npm install lib-flexible --save
npm install postcss-px2rem --save

在main.js 自动生成一行
import 'amfe-flexible'

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

完成后,我们把浏览器切换到 iphone6 的大小尺寸

完成以上步骤后 页面自动生成font-size = 37.5px

写css 尝试以px为单位

.cube-slide
    width:100%
    height:200px 尝试设置高度为 200px   

在iphone6的尺寸下 宽为（375px） font-size为(37.5px) 所以px/rem= 37.5 ,所以200px/37.5 = 5.33333rem

在iphone6的尺寸下 高度也是200px

px自动转为rem

接着我们尝试切换到 iphone5 的尺寸

fontsize自动变成32px

高度自动缩小到170.66px

高度还是5.333333rem

此依赖的好处就是不用自己算rem 来做自适应
直接通过px 从而换算出 rem

查看依赖里面的文件，fontsize从这里算出

iphone6屏幕尺寸为 375px
所以除以10 令 fontsize = 37.5 px
所以   px /rem  = 37.5


iphone5屏幕尺寸为 320px
所以除以10 得 fontsize = 32 px 
所以  px/rem = 32 


将height = 200px 
通过 postcss-px2rem 这个依赖
当时的fontsize = 37.5 
那么这个依赖自动换算
200px / 37.5 = 5.3333
那么rem =  5.3333

那么在iphone6下
5.333rem * 37.5 = 200px
height 还是等于 200px 
 
但是在改变屏幕大小时候
由于rem = 5.33333  但是 px/rem 却变成 32px  
所以得出 px = 170.66px
从而使高度自适应缩小