postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位。
前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。
安装依赖
npm install postcss-pxtorem --save-dev
设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件)
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 16,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
propList: ['*']
}
}
}
明白了REM的原理后,我们就可以使用这个特点来进行适应布局了,这也是现在比较主流的移动端web适配方案。src目录下,新建 libs/rem.js 输入如下代码
function getRem (pwidth, prem) {
var html = document.getElementsByTagName('html')[0]
var oWidth = document.body.clientWidth || document.documentElement.clientWidth
html.style.fontSize = oWidth / pwidth * prem + 'px'
}
window.onload = function () {
getRem(375, 100)
}
window.onresize = function () {
getRem(375, 100)
}
在main.js中引入rem.js
import './libs/rem.js';