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 文件夾。打開(kāi) 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的寬就寫(xiě)成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的寬就寫(xiě)成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)開(kāi)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 的配置就算全部完成了?，F(xiàn)在就可以根據(jù)設(shè)計(jì)稿的大小寫(xiě)樣式啦，不用轉(zhuǎn)換~~~ 設(shè)計(jì)稿的尺寸寫(xiě)的是多少直接C/V過(guò)來(lái)就好了，不需要轉(zhuǎn)換更改
二vw
第一步:
vw 的配置會(huì)比 rem 簡(jiǎn)單很多，前面的基本相同，就后面不需要在配置兼容ipad這些之類(lèi)的
1、安裝依賴(lài)包 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
解包后打開(kāi) 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: [], // 排除的類(lèi)
minPixelValue: 1, // px的最小單位
mediaQuery: false, // 排除媒體查詢(xún)
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: [], // 排除的類(lèi)
minPixelValue: 1, // px的最小單位
mediaQuery: false, // 排除媒體查詢(xún)
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)文章
React?Hook?Form?優(yōu)雅處理表單使用指南
這篇文章主要為大家介紹了React?Hook?Form?優(yōu)雅處理表單使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了React事件綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
react中關(guān)于函數(shù)調(diào)用()與bind this的原因及分析
這篇文章主要介紹了react中關(guān)于函數(shù)調(diào)用()與bind this的原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
react中將html字符串渲染到頁(yè)面的實(shí)現(xiàn)方式
這篇文章主要介紹了react中將html字符串渲染到頁(yè)面的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了React中的setState使用細(xì)節(jié)和原理解析,主要包括使用setstate的原因及基本用法，本文通過(guò)實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
如何應(yīng)用?SOLID?原則在?React?中整理代碼之開(kāi)閉原則
React?不是面向?qū)ο?，但這些原則背后的主要思想可能是有幫助的，在本文中，我將嘗試演示如何應(yīng)用這些原則來(lái)編寫(xiě)更好的代碼，對(duì)React?SOLID原則開(kāi)閉原則相關(guān)知識(shí)感興趣的朋友一起看看吧2022-07-07
基于React實(shí)現(xiàn)調(diào)用式Modal組件的全流程
本文基于 nextUI 和 tailwindCSS 實(shí)現(xiàn)調(diào)用式 Modal 組件的封裝,文中通過(guò)圖文結(jié)合的方式和代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-12-12
30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼
本文主要介紹了30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家介紹了Suspense對(duì)React的意義及作用解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了react組件實(shí)例屬性state,有狀態(tài)state的組件稱(chēng)作復(fù)雜組件,沒(méi)有狀態(tài)的組件稱(chēng)為簡(jiǎn)單組件，狀態(tài)里存儲(chǔ)數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動(dòng)頁(yè)面的展示，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-02-02