dva 中使用postcss-pxtorem适配移动端

版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/luyu13141314/article/details/88533543

1、安装插件

npm install postcss-pxtorem --save-dev

2、 新建一个rem.js放在utils下面

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1024 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1024
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

3、在index.js中引入rem.js

import './utils/rem'

4、配置.webpack.js，自动转换px为对应的rem

const pxtorem = require('postcss-pxtorem');
const pxtorem2 = _interopRequireDefault(pxtorem).default;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
export default {
	entry: "./src/index.js",
	"env": {
	  "development": {
			"extraBabelPlugins": [
				["import", { "style": "css", "libraryName": "antd" ,"libraryDirectory": "lib"}]
	    ],
			publicPath: "/",
	    extraPostCSSPlugins: [
				pxtorem2({ rootValue: 32, propWhiteList: [], })
	    ]
	  },
	  "production": {
			"extraBabelPlugins": [
				["import", { "style": "css", "libraryName": "antd" ,"libraryDirectory": "lib"}]
	    ],
			publicPath: "/pad4/dist/",
	    extraPostCSSPlugins: [
	      pxtorem2({ rootValue: 32, propWhiteList: [], })
	    ]
	  }
	}
}