标签：vue px h5 rem flexible js postcss pxtorem 页面

	有时候我们为了前端页面可以匹配不同分辨率的屏幕，会使用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转换的选择器
 }

完成以上配置就可以实现px转rem了，需要注意的是我这里是在cli2版本去修改的配置，cli3的配置方式是：在根路径下新增postcss.config.js文件（如果有，就不新增），配置的内容与上相同

标签：vue,px,h5,rem,flexible,js,postcss,pxtorem,页面
来源： https://blog.csdn.net/qq_29236119/article/details/112620932

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。