postcss-plugin-px2rem的使用
2021-03-30 07:28
标签：save cli Fix auto col unit ati rem def 首先需要安装 npm install --save-dev postcss-plugin-px2rem 在 postcss-plugin-px2rem的使用 标签：save cli Fix auto col unit ati rem def 原文地址：https://www.cnblogs.com/wangtaolearning/p/12597137.htmlpostcss-plugin-px2rem//package.json
var px2rem = require(‘postcss-px2rem‘);
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function() {
return [px2rem({remUnit: 75})];
}
}
// 一般postcss建议单独配置在文件postcss.config.js中
module.exports = {
plugins: [
require(‘autoprefixer‘)({ browsers: ‘last 2 versions‘ }),
require(‘postcss-px2rem‘)({remUnit: 75})
]
}
// REM是根据根结点来计算各个子节点的值，所以根结点也要做响应式变化。
utils/setRem.js
export default function setRem(baseWidth = 750) {
const dpr = window.devicePixelRatio;
const currentWidth = document.documentElement.clientWidth;
let remSize = 0;
let scale = 0;
scale = currentWidth / baseWidth;
remSize = baseWidth / 10;
remSize = remSize * scale;
document.documentElement.style.fontSize = remSize + ‘px‘;
document.documentElement.setAttribute(‘data-dpr‘, `${dpr}`);
}index.js中引入即可import setRem from ‘./utils/setRem‘
setRem()