rem?是相對(duì)于根元素 < html > 的,這樣就意味著,我們只需要在根元素確定一個(gè)參考值匀伏,這個(gè)參考值設(shè)置為多少带欢,完全可以根據(jù)您自己的需求來(lái)定运授。
我這里是同過(guò)create-react-app阿里創(chuàng)建React的腳手架的,先運(yùn)行命令
npm run eject
將React的腳手架的配置彈射出來(lái)乔煞,這樣可以方便來(lái)配置文件
接下來(lái)就需要安裝插件了?
npm install lib-flexible postcss-px2rem-exclude -D
安裝插件成功之后在下面的文件添加相應(yīng)的配置
完成修改之后再根目錄下index.js下引入
import "lib-flexible";
在public的文件下的index.html下修改或者添加這么一段話(huà)
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
這步完成之后就可以重啟項(xiàng)目了吁朦,這時(shí)時(shí)候就可以根據(jù)設(shè)計(jì)圖的尺寸來(lái)寫(xiě)項(xiàng)目了,但是需要注意在配置時(shí)算好到底是二倍圖還是三倍圖渡贾。這樣就會(huì)將px轉(zhuǎn)化為rem了逗宜。
網(wǎng)站根據(jù)https://blog.csdn.net/u013790941/article/details/103925570來(lái)整理編寫(xiě)