随身笔记
随身笔记

vuelic脚手架适配移动端解决方法rem

目前在vue2 环境下进行

安装:

npm install amfe-flexible --save  //为html、body添加font-size,窗口调整时候重新设置font-size
npm install postcss-pxtorem@5.1.1 --save-dev  //将px转rem

 

1,在main.js入口文件引入

import 'amfe-flexible'

 

2,创建postcss.config.js配置文件

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 75, //如果设计稿是750px
            "propList": ["*"], // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
            "exclude": /node_modules/i
        }
    }
}


//假设设计稿750宽;rootValue为75,说是对根元素大小进行设置.
rootValue: 75,
//unitPrecision为5,是转换成rem后保留的小数点位数.
unitPrecision: 5,
//propList是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']意思是排除带有border的属性.
propList: ['*'],
//selectorBlackList则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换这里也支持正则写法。
selectorBlackList: [],
replace: true,
mediaQuery: false,
//minPixelValue的选项,我设置了12,意思是所有小于12px的样式都不被转换
minPixelValue: 12

 

3,小技巧

比如像border这种我不愿意替换成rem的我该怎么解决?
我还是想使用px来表达的话,那么我们可以把1px写成 1Px 或 1PX来解决

 

也可参考:https://jskoa.com/?p=7364

 

https://www.jianshu.com/p/7acdb535fcd5

https://blog.csdn.net/a460550542/article/details/125084903

 

没有标签
首页      前端资源      wordpress教程      vuelic脚手架适配移动端解决方法rem

随身笔记

vuelic脚手架适配移动端解决方法rem
目前在vue2 环境下进行 安装: npm install amfe-flexible --save //为html、body添加font-size,窗口调整时候重新设置font-size npm install postcss-pxtorem@5.1.1 --save-dev /…
扫描二维码继续阅读
2022-08-16