vue 中h5页面自适应的实现

	有时候我们为了前端页面可以匹配不同分辨率的屏幕,会使用rem来对页面进行布局,无论基础px值设置得多么好计算,在写rem数值的时候,都需要对设计图原始的px值进行一番换算。
	
	当当当当,来介绍一下两个好朋友,**postcss-pxtorem** 和 **lib-flexible** ,安装配置这两个依赖,我们就可以实现我们想要的功能啦。

1、首先,我们先来安装包:

npm install amfe-flexible --save-dev
npm install postcss-pxtorem --save-dev

2、在main.js中引入lib-flexible

import 'amfe-flexible';

3、配置postcss-pxtorem
首先找到.postcssrc.js文件,增加以下内容:

"postcss-pxtorem": {
   rootValue: 75, // 根据设计图尺寸写,设计图是750,就写75
   propList: ['*'], // 需要被转换的属性
   selectorBlackList: [] // 不进行px转换的选择器
 }

vue 中h5页面自适应的实现完成以上配置就可以实现px转rem了,需要注意的是我这里是在cli2版本去修改的配置,cli3的配置方式是:在根路径下新增postcss.config.js文件(如果有,就不新增),配置的内容与上相同

上一篇:css新一代特性


下一篇:Vue 移动端页面适配 rem