vue2.X中使用postcss-pxtorem
postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位。
前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。
1.安装依赖
npm i postcss-pxtorem@5.1.1 -D
2.设置规则(更改postcss.config.js中的配置)
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,//根元素的像素值
propList: ['*'], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要取消对边框设置rem,可以写['*', '!border*']
unitPrecision: 5, //保留rem小数点多少位
//selectorBlackList: ['.ignore', '.hairline'], //则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法。
mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
minPixelValue: 1, //px小于1的不会被转换
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 不转换我们引入的第三方包
}
}
}
3 在项目的main.js入口文件中引入设置html标签中font-size的大小:
// 设置 rem 函数
function setRem () {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//设置根元素字体大小
document.documentElement.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
Vue2.X中使用postcss-px-to-viewport
postcss-px-to-viewport是PostCSS的插件,用于将像素单元生成vw单位。
- 安装依赖
npm i postcss-px-to-viewport -D
- 配置规则(更改postcss.config.js中的配置)
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿宽度
// viewportHeight: 1334, // 设计稿高度,可以不指定
unitPrecision: 3, // px to vw无法整除时,保留几位小数
propList: ['*', '!border*'],
viewportUnit: 'vw', // 转换成vw单位
selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名
minPixelValue: 1, // 小于1px不转换
mediaQuery: false, // 不允许媒体查询中转换
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 不转换我们引入的第三方包
}