react配置px轉(zhuǎn)換rem的方法
安裝相關(guān)的依賴
npm i lib-flexible --save
npm i postcss-px2rem --save
主要用來暴露項(xiàng)目配置
npm run eject
！如果運(yùn)行npm run eject報(bào)錯(cuò)，出錯(cuò)的原因應(yīng)該是倉(cāng)庫(kù)里面代碼沒有提交，如下提交一下
git add .
git commit -m '自定義名'
npm run eject
然后打開項(xiàng)目中 config->webpack.config.js 進(jìn)行配置
// 在配置文件中添加如下兩行代碼
// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 這個(gè)是根據(jù)750px設(shè)計(jì)稿來的，如果是620 的就寫 62const px2rem = require('postcss-px2rem');
px2rem({ remUnit: 75 })
按照設(shè)計(jì)圖大小設(shè)置 如：108=1080px/10
引入 lib-flexible：在入口文件index.js中引入lib-flexible文件
import 'lib-flexible'
在 public->index.html 文件里把下面的這段代碼注釋掉
配置完成之后 重啟項(xiàng)目
到此這篇關(guān)于react配置px轉(zhuǎn)換rem的方法的文章就介紹到這了,更多相關(guān)react配置px轉(zhuǎn)換rem內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React?Native集成支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native集成支付寶支付的實(shí)現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以，我們只需要在原生工程中集成支付寶和微信支付的sdk，然后使用NativeModules調(diào)用即可，需要的朋友可以參考下2022-02-02
一文搞懂?React?18?中的?useTransition()?與?useDeferredValue()
這篇文章主要介紹了一文搞懂?React?18?中的?useTransition()與useDeferredValue()，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了React中的生命周期和子組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了React優(yōu)化子組件render的使用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
React Hook 'useEffect' is call
這篇文章主要為大家介紹了React Hook 'useEffect' is called in function報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
詳解使用React.memo()來優(yōu)化函數(shù)組件的性能
本文講述了開發(fā)React應(yīng)用時(shí)如何使用shouldComponentUpdate生命周期函數(shù)以及PureComponent去避免類組件進(jìn)行無用的重渲染，以及如何使用最新的React.memo API去優(yōu)化函數(shù)組件的性能2019-03-03
本文通過實(shí)例給大家分享了編寫React組件項(xiàng)目實(shí)踐的全過程，對(duì)此有興趣的朋友可以參考下。2018-03-03
react native實(shí)現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實(shí)例
下面小編就為大家?guī)硪黄猺eact native實(shí)現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了React使用公共文件夾public問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
react setupProxy.js導(dǎo)致項(xiàng)目無法啟動(dòng)的解決
這篇文章主要介紹了react setupProxy.js導(dǎo)致項(xiàng)目無法啟動(dòng)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07