[JavaScript知识库]React脚手架移动端适配方案

1.初始化脚手架
create-react-app hello_react

2.安装依赖
yarn add postcss-px2rem customize-cra react-app-rewired

3.根目录下建立config-overrides.js

const { override, addPostcssPlugins } = require('customize-cra')
module.exports = {
	// 375 是设计稿宽度
	addPostcssPlugins([require("postcss-px2rem")({remUnit: 375/10})])
}

4.更改package.json

"scripts":{
	"start": "react-app-rewired start",
	"build": "react-app-rewired build",
	"test": "react-app-rewired test",
	"eject": "react-app-rewired eject"
}

5.src目录下新建rem.js,内容如下(给不同设备设置字体大小)

function adapter(){
	const dp = document.documentElement.clientWidth;
	const rootFontSize = dp/10;
	document.documentElement.style.fontSize = rootFontSize + 'px'
}
adapter()
window.onresize = adapter

然后就可以自在的写具体数字的px啦哈哈哈哈哈