vue3.0配置 px转rem

1.npm install lib-flexible (让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备)

在main.js引入中:import 'lib-flexible/flexible.js'

2.npm install postcss-pxtorem

在package.json内,在postcss内添加:

"postcss": {

"plugins": {

"autoprefixer": {},

"postcss-pxtorem": {

"rootValue": 75, // 设计稿宽度的1/10,(JSON文件中不加注释,此行注释及下行注释均删除)

           "selectorBlackList": [ "vant" ],//忽略转rem项,列表中不进行转rem

"propList":["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部

}

}

},


3.使用 postcss-px-to-viewport  注意:移动端用方便,不过在pc端会出新字体过大的现象

npm install  postcss-px-to-viewport

package.json中,在postcss中添加代码:


"postcss": {

"plugins": {

"autoprefixer": {},

"postcss-px-to-viewport": {

"viewportWidth": 750,

"minPixelValue": 1

}

}

},

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容