登录
转载

vue3.0 rem适配手机端

发布于 2021-03-12 阅读 976
  • 前端
  • JavaScript
  • HTML
转载

postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem lib-flexible 用于设置 rem 基准值

1、安装postcss、lib-flexible

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

2、main.js中引入

import 'amfe-flexible';

3、创建名为postcss.config.js的文件放在根目录,记得要重新运行项目。 在这里插入图片描述

module.exports = {
	plugins: {
		'autoprefixer': {},
		'postcss-pxtorem': {
			rootValue: 75, //一个rem等于75个px;相当于vue/css文件中写width:75;会转换成width:1rem;再根据html的fontsize计算实际的width:
			propList: ['*'], //允许哪些属性转成rem;
			unitPrecision: 5, //最多小数位数;
			selectorBlackList: [/^\.van-/,/^\.mescroll/], //忽略.van-和.mescroll开头的类名;
			replace: true,
			mediaQuery: false, //允许在媒体查询中转换px
			minPixelValue: 2, //设置要替换的最小像素值
		}
	}
}

4、重新运行项目,会有一个错误提示,如果有的话需要降低postcss-pxtorem的版本号就行

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
解决方案:降低postcss-pxtorem版本,重新启动就可以了
npm i postcss-pxtorem@5.1.1

5、正常运行后,由下图可以看到,px正常转rem 在这里插入图片描述 在这里插入图片描述

评论区

詹姆斯36岁了还能获得NBA总冠军,你呢?

0

1

0

举报