react+lib-flexible適配瀏覽器寬度配置

主要是通過lib-flexible搭配px2rem，將設計稿中固定的px單位轉換成根據屏幕大小自動計算的rem單位，達到屏幕適配的目的。

在此之前需要先搭建好react項目。接下來是安裝下面的步驟配置flexible。

第一步，安裝lib-flexible並在src/index.js中配置import 'lib-flexible/flexible';

npm install lib-flexible -save

 

第二步， 安裝postcss-px2rem

npm install postcss-px2rem

 

第三步，配置px2rem

在config/webpack.config.js中配置

const px2rem = require('postcss-px2rem');

在getStyleLoaders函數中找到postcss-loader的配置項，加入px2rem({ remUnit: 192, remPrecision: 8 })，然后重啟項目，在瀏覽器中檢查頁面的html和body標簽都自動加入style屬性，若有則表示成功了。

config/webpack.config.js修改處如下：

{
       loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
                postcsspxtorem: {
                  "rootValue": 75,
                  "propList": ['*', '!border*'],
                  // 注意：如果有使用第三方UI如VUX，則需要配置下忽略選擇器不轉換。
                  // 規則是class中包含的字符串，如vux中所有的class前綴都是weui-。也可以是正則。
                  "selectorBlackList": ['ivu-']
                },
                remove: false
              },
              stage: 3,
            }),
            px2rem({
              remUnit:192,
          remPrecision: 8
            })
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },

如果你是新建的項目，找不到config/webpack.config.js這個文件，這個時候就需要執行一下npm run eject,

該語句執行后會在項目中顯示一下config和script文件夾，需要配置的webpack.config.js就在config文件夾中。由於我在這一步執行操作中出現報錯Remove untracked files, stash or commit any changes, and try again.這里也跟大家分享一下處理方式。

參考資源：https://blog.csdn.net/weixin_41606276/article/details/85123919

 

當然，目前的配置滿足大屏幕和小屏幕的適配，而在超大屏幕的使用上就顯得不足，這是由於在插件源碼中refreshRem方法提到當寬度大於540這個特定值時就不再有對應的適配，這里為了使其適配超大屏幕，需要將其中的if判斷刪除或注釋。這里的操作與上一篇博文中的配置相同，這里就不在體現。

具體參考：https://www.cnblogs.com/min77/p/14434896.html