React 18版本配置rem 和 vw的詳細(xì)步驟
更新時(shí)間：2024年01月25日 09:54:50 作者：我叫汪楓
這篇文章主要介紹了React 18版本配置rem 和 vw的詳細(xì)步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
React 18版本配置rem 和 vw
經(jīng)過(guò)無(wú)數(shù)次的實(shí)驗(yàn)最終發(fā)現(xiàn)兼容性比較好的方案是配置webpack.config.js
第一步:
npm install lib-flexible postcss-pxtorem yarn add lib-flexible postcss-pxtorem
第二步:
接下來(lái)直接解包-- yarn eject npm run eject
第三步:
這一步也是最關(guān)鍵的一補(bǔ)我們需要配置一下loader
解包后，可以看到項(xiàng)目目錄下多了一個(gè) config 文件夾。打開 config/webpack.config.js ：
搜索 postcss-loader ，添加：以下內(nèi)容
const loaders = [
........,
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
config: false,
plugins: !useTailwind
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
/* -------添加下面這一段------- -----------------------------------------------------*/
[
'postcss-pxtorem',
{
rootValue: 112.5, //設(shè)計(jì)圖最大寬度除以10 //比如750的寬就寫成75 我這邊是1125的寬
selectorBlackList: [],
propList: ['*'],
exclude: /node_modules/i
}
],
/* -------添加上面這一段------- ------------------------------------------------*/
'postcss-normalize',
]
: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
/* -------添加下面這一段------------------------------------------------------------ */
[
'postcss-pxtorem',
{
rootValue: 112.5, //設(shè)計(jì)圖最大寬度除以10 //比如750的寬就寫成75 我這邊是1125的寬
selectorBlackList: [],
propList: ['*'],
exclude: /node_modules/i
}
]
/* -------添加上面這一段------------------------------------------------------------ */
],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
]
注意：這里的 rootValue: 112.5 的意思就是1rem = 112.5px 這個(gè)是根據(jù)1125px設(shè)計(jì)稿來(lái)的！第四步
在 入口文件 index.js 里引入 lib-flexible： import 'lib-flexible'
重啟項(xiàng)目文件
npm run start 或者 yarn start
兼容ipad
但是，當(dāng)你點(diǎn)開ipad時(shí)，會(huì)發(fā)現(xiàn)盒子兼容出了問(wèn)題，這是因?yàn)樘詫殢椥圆季址桨竘ib-flexible不兼容ipad和ipad pro。我們這里給出解決方案：
在public>index.html的head標(biāo)簽中添加：
這樣，我們就解決ipad的兼容問(wèn)題了。
7、修改meta標(biāo)簽
這樣，我們 rem 的配置就算全部完成了。現(xiàn)在就可以根據(jù)設(shè)計(jì)稿的大小寫樣式啦，不用轉(zhuǎn)換~~~ 設(shè)計(jì)稿的尺寸寫的是多少直接C/V過(guò)來(lái)就好了，不需要轉(zhuǎn)換更改
二vw
第一步:
vw 的配置會(huì)比 rem 簡(jiǎn)單很多，前面的基本相同，就后面不需要在配置兼容ipad這些之類的
1、安裝依賴包 npm i postcss-px-to-viewport --save-dev 或者 yarn add postcss-px-to-viewport --save-dev 2、解包 這一步和上面配置 rem 的一樣，先提交倉(cāng)庫(kù)在解包 git add . git commit -m 'eject之前的提交' 解包 yarn eject npm run eject
第二步:
配置loader
解包后打開 config/webpack.config.js 文件夾，搜索 postcss-loader ，添加：
const loaders = [
......
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
config: false,
plugins: !useTailwind
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
/* -------添加下面這一段------- */
require('postcss-px-to-viewport')({
viewportWidth: 1125, // 視口寬度，根據(jù)設(shè)計(jì)圖的大小
viewportHeight: 1000, // 視口高度，根據(jù)設(shè)計(jì)圖的大小
unitPrecision: 6,// 保留小數(shù)點(diǎn)
viewportUnit: 'vw', // 單位
selectorBlackList: [], // 排除的類
minPixelValue: 1, // px的最小單位
mediaQuery: false, // 排除媒體查詢
landscapeUnit: 'vw', // 橫屏單位
fontViewportUnit: 'vw' // 字體屬性單位
}),
/* -------添加上面這一段------- */
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
'postcss-normalize',
]
: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
/* -------添加下面這一段------- */
require('postcss-px-to-viewport')({
viewportWidth: 1125, // 視口寬度，根據(jù)設(shè)計(jì)圖的大小
viewportHeight: 1000, // 視口高度，根據(jù)設(shè)計(jì)圖的大小
unitPrecision: 6,// 保留小數(shù)點(diǎn)
viewportUnit: 'vw', // 單位
selectorBlackList: [], // 排除的類
minPixelValue: 1, // px的最小單位
mediaQuery: false, // 排除媒體查詢
landscapeUnit: 'vw', // 橫屏單位
fontViewportUnit: 'vw' // 字體屬性單位
}),
/* -------添加上面這一段------- */
],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
]到此這篇關(guān)于React 18版本配置rem 和 vw的文章就介紹到這了,更多相關(guān)React配置rem 和 vw內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
具體來(lái)說(shuō)這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來(lái)實(shí)現(xiàn)。下面就說(shuō)說(shuō)這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧2022-12-12
React+Node.js實(shí)現(xiàn)大文件傳輸與斷點(diǎn)續(xù)傳
這篇文章主要為大家詳細(xì)介紹了如何使用React前端和Node.js后端實(shí)現(xiàn)大文件傳輸和斷點(diǎn)續(xù)傳的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2024-12-12
react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能
二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實(shí)現(xiàn)編輯+拖拽,還是需要轉(zhuǎn)換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2024-03-03
react在安卓中輸入框被手機(jī)鍵盤遮擋問(wèn)題的解決方法
這篇文章主要給大家介紹了關(guān)于react在安卓中輸入框被手機(jī)鍵盤遮擋問(wèn)題的解決方法，文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧2018-09-09
這篇文章主要介紹了React反向代理及樣式獨(dú)立詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了React中拆分組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們掌握React有一定的幫助,需要的小伙伴可以參考一下2023-12-12
React 中 map 處理異步數(shù)據(jù)不渲染的問(wèn)題及解決方法
文章講述了在使用React時(shí)遇到的異步問(wèn)題導(dǎo)致頁(yè)面卡頓的情況,通過(guò)Promise.all等方法解決了異步操作的順序問(wèn)題,使得頁(yè)面能夠正常渲染,感興趣的朋友跟隨小編一起看看吧2026-01-01
這篇文章主要介紹了React添加或移除類的操作方法，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)
這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-03-03
React的組件協(xié)同使用實(shí)現(xiàn)方式
這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開發(fā)中，有哪些場(chǎng)景的組件協(xié)同？又如何去實(shí)現(xiàn)組件的協(xié)同使用呢？本文都給大家提到，感興趣的朋友跟隨小編一起看看吧2021-09-09