什么是postcss-px2viewport?
一个postcss插件,结合viewport.js使用
默认使用
vw
作为布局单位,对于不支持vw
单位的,则使用rem
进行布局
对于标记了
/*px*/
的,则转换为[data-dpr="1"]
、[data-dpr="2"]
、[data-dpr="3"]
三种不同的字体
对于标记了
/*no*/
的,则不做处理,依然使用px进行布局
配置过程
首先确定安装了
npm install postcss-loader --save-dev
然后根目录下创建postcss.config.js
填入以下内容:
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-px2viewport')
],
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function() {
return [px2viewport({viewportWidth: 736,viewportHeight:414})];
}
}