快捷導(dǎo)航

react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解

更新時(shí)間：2023年08月28日 11:59:14 作者：mengyuhang4879

這篇文章主要為大家介紹了react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

在create-react-app項(xiàng)目中配置絕對(duì)單位px轉(zhuǎn)換為相對(duì)單位rem,其中使用postcss-plugin-px2rem轉(zhuǎn)換css/less/sass文件(此插件不支持內(nèi)聯(lián)樣式轉(zhuǎn)換)，使用編寫的loader轉(zhuǎn)換內(nèi)聯(lián)樣式

1.安裝插件

npm i postcss-plugin-px2rem

2.配置webpack

1 找到config/webpack.config.js里postcss-loader，增加以下代碼

[
                                  'postcss-plugin-px2rem',
                                  {
                                      rootValue: 16,//這是基準(zhǔn)根元素的大小，用于計(jì)算 rem 單位。例如，如果你的 HTML 根元素的 font-size 設(shè)置為 16px，那么設(shè)置 rootValue 為 16 將會(huì)將 16px 轉(zhuǎn)換為 1rem
                                      unitPrecision: 5,//轉(zhuǎn)換后的 rem 值的小數(shù)點(diǎn)位數(shù)。例如，如果設(shè)置為 5，那么轉(zhuǎn)換后的 rem 值會(huì)保留小數(shù)點(diǎn)后的五位
                                      propWhiteList: [],//哪些屬性會(huì)被轉(zhuǎn)換,不填則是都轉(zhuǎn)換
                                      propBlackList: [],//哪些屬性不會(huì)被轉(zhuǎn)換
                                      exclude: ['/node_modules/'],//排除文件
                                      selectorBlackList: ['noRem'], //定義了哪些選擇器不會(huì)被轉(zhuǎn)換。例如，['noRem'] 表示帶有類名為 noRem 的選擇器不會(huì)被轉(zhuǎn)換。
                                      ignoreIdentifier: false,// 是否忽略選擇器中的標(biāo)識(shí)符。設(shè)置為 false 將會(huì)處理選擇器中的標(biāo)識(shí)符
                                      replace: true,// 是否替換原始的像素值為轉(zhuǎn)換后的 rem 值。
                                      mediaQuery: false,//是否在媒體查詢中也進(jìn)行轉(zhuǎn)換
                                      minPixelValue: 0// 最小的像素值，小于這個(gè)值的像素值將不會(huì)被轉(zhuǎn)換。
                                  }
                              ]

這樣就完成了對(duì)非內(nèi)聯(lián)樣式的轉(zhuǎn)換

3.編寫自定義loader轉(zhuǎn)換內(nèi)聯(lián)樣式

pxToRemLoader代碼

module.exports = function(content, map, meta) {
  // let reg = /(\d+(\\.\d+)?)px/g
  let reg = /(?<num1>\d+)\.?(?<num2>\d+)?px/g  // 匹配所有px 相關(guān)的字符
  let content1 = content.replace(reg,function(...data){ // px 轉(zhuǎn)換為帶小數(shù)的rem
      var arr = data[data.length-1]
      var num1=0, num2=0;
      if(arr.num1)num1=parseFloat(arr.num1)
      if(arr.num2)num2=parseFloat(arr.num2)
      return  parseFloat(num1+'.'+num2)/16 + 'rem' // 這里以16px 為pc端轉(zhuǎn)換基數(shù) 適配1920分辨率
  })
  return content1
};

webpack修改原有配置

{
                          test: /\.(js|mjs|jsx|ts|tsx)$/,
                          include: paths.appSrc,
                          use: [
                              {
                                  loader: require.resolve("babel-loader"),
                                  options: {
                                      customize: require.resolve(
                                          "babel-preset-react-app/webpack-overrides"
                                      ),
                                      presets: [
                                          [
                                              require.resolve("babel-preset-react-app"),
                                              {
                                                  runtime: hasJsxRuntime ? "automatic" : "classic",
                                              },
                                          ],
                                      ],
                                      plugins: [
                                          isEnvDevelopment &&
                                          shouldUseReactRefresh &&
                                          require.resolve("react-refresh/babel"),
                                      ].filter(Boolean),
                                      // This is a feature of `babel-loader` for webpack (not Babel itself).
                                      // It enables caching results in ./node_modules/.cache/babel-loader/
                                      // directory for faster rebuilds.
                                      cacheDirectory: true,
                                      // See #6846 for context on why cacheCompression is disabled
                                      cacheCompression: false,
                                      compact: isEnvProduction,
                                  },
                              },
                              {
                                  loader: path.resolve('./config/webpack/loader/pxToRemLoader.js')
                              }
                          ]
                      },

借鑒：

http://www.fzitv.net/javascript/296510a17.htm

http://www.fzitv.net/article/211204.htm

以上就是react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于react自適應(yīng)布局px轉(zhuǎn)rem的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: