安装依赖
npm install lib-flexible --save
npm install postcss-px2rem --save
在main.js 自动生成一行
import 'amfe-flexible'
lexible会为页面根据屏幕自动添加<meta name='viewport' >标签,
动态控制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
从而使高度自适应缩小