react中將px轉化爲rem或者vw

1、px轉rem

一、執行顯示webpack配置

npm run eject

二、安裝 postcss-px2rem-exclude、lib-flexible、sass-loader、node-sass

 

npm insatll lib-flexible sass-loader node-sass postcss-px2rem-exclude --save

 

三、修改webpack.config.js,先引入postcss-px2rem-exclude,而後在postcss-loader的plugins中加入

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

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
        flexbox: 'no-2009',
      }),
//px2rem加在這裏
      px2rem({
        remUnit:75,exclude: /node_modules/i
      })
    ],
  },
},

四、在react入口文件引入lib-flexible

import "lib-flexible"

五、修改index.html 禁止縮放

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />

六、完成後重啓才能生效。

npm start

2、px轉vw

一、安裝須要的插件

npm install -D postcss-import postcss-url cssnano-preset-advanced 
npm install -S postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units

二、index.html修改禁止縮放

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,width=device-width">

三、新建配置文件 .postcssrc.js 並配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      viewportHeight: 1334, // (Number) The height of the viewport. 
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
      viewportUnit: 'vw', // (String) Expected units. 
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
      mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

四、vw的兼容處理（有些手機不支持vw單位）

npm install viewport-units-buggyfill --save

在項目入口處（如main.js）引入

let hacks = require(‘viewport-units-buggyfill.hacks‘);
require(‘viewport-units-buggyfill‘).init({
  hacks: hacks
});

或者在index.html中引入並初始化

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
<script>
    window.onload = function () {
      window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
      });
    }
</script>

五、在webpack.config.js中引入並在 postcss-loader 中使用插件

const postcssAspectRatioMini = require('postcss-aspect-ratio-mini')
const postcssPxToViewport = require('postcss-px-to-viewport')
const postcssWriteSvg = require('postcss-write-svg')
const postcssCssnext = require('postcss-cssnext')
const postcssViewportUnits = require('postcss-viewport-units')
const cssnano = require('cssnano')

  {
    loader: require.resolve('postcss-loader'),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebookincubator/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        autoprefixer({
          browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9' // React doesn't support IE8 anyway
          ],
          flexbox: 'no-2009'
        }),
        postcssAspectRatioMini({}),
        postcssPxToViewport({
          viewportWidth: 750, // (Number) The width of the viewport.
          viewportHeight: 1334, // (Number) The height of the viewport.
          unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
          viewportUnit: 'vw', // (String) Expected units.
          selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
          minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
          mediaQuery: false // (Boolean) Allow px to be converted in media queries.
        }),
        postcssWriteSvg({
          utf8: false
        }),
        postcssCssnext({}),
        postcssViewportUnits({}),
        cssnano({
          preset: 'advanced',
          autoprefixer: false,
          'postcss-zindex': false
        })
      ]
    }
  }

 

六、重啓後生效

npm start