@atom8/postcss-vpx2vw
v0.0.1
Published
A CSS post-processor that converts vpx to vw and fallback rem.
Downloads
79
Readme
一款 PostCSS 插件,将 px
转换成 vw
和 rem
。
该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能,精简了不常用的配置。默认将 vw
作为优先单位使用,以 rem
作为回退模式。考虑到 vw
在移动设备的支持度不如 rem
,这款插件很好的解决了该问题。
安装
$ npm i @atom/postcss-vpx2vw -D
使用
// .postcssrc.js
module.exports = {
plugins: {
'@atom/postcss-vpx2vw ': {}
}
}
举例:
// input
.class {
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
// output
.class {
border: 1px solid black;
margin-bottom: 1px;
font-size: 0.625rem;
font-size: 6.25vw;
line-height: 0.9375rem;
line-height: 9.375vw;
}
配置
viewportWidth
:对应设计图的宽度,用于计算vw
。默认750
,指定0
或false
时禁用rootValue
:根字体大小,用于计算rem
。默认75
,指定0
或false
时禁用unitPrecision
:计算结果的精度,默认5
minPixelValue
:小于等于该值的px
单位不作处理,默认1
注意:该插件只会转换
px
单位。rootValue
一般建议设置成viewportWidth / 10
的大小,将设计图分成10等分。由于浏览器有最小字体限制,如果设置得过小,页面可能跟预期不一致
如果要使用 rem
单位,需要自己通过 js
来动态计算根字体的大小。如果将设计图分成 10 等分计算,那么根字体的大小应该是 window.innerWidth / 10
。
最后
如果你觉得对你有帮助,欢迎 star 和 issue