首先需要安置postcss-plugin-px2rem

npm install --save-dev postcss-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()

postcss-plugin-px2rem的使用