rem 是相对于根元素 < html > 的,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。
我这里是同过create-react-app阿里创建React的脚手架的,先运行命令
npm run eject
将React的脚手架的配置弹射出来,这样可以方便来配置文件
接下来就需要安装插件了
npm install lib-flexible postcss-px2rem-exclude -D
安装插件成功之后在下面的文件添加相应的配置
完成修改之后再根目录下index.js下引入
import "lib-flexible";
在public的文件下的index.html下修改或者添加这么一段话
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
这步完成之后就可以重启项目了,这时时候就可以根据设计图的尺寸来写项目了,但是需要注意在配置时算好到底是二倍图还是三倍图。这样就会将px转化为rem了。
网站根据https://blog.csdn.net/u013790941/article/details/103925570来整理编写