react中将px转化为rem或者vw

灰太狼 2021-12-23 11:25 1198阅读 0赞

**一、px转rem**

1、执行显示webpack配置

npm run eject

2、安装 postcss-px2rem-exclude、lib-flexible、sass-loader、node-sass

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

3、修改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
          })
        ],
      },
    },

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

import "lib-flexible"

5、修改index.html 禁止缩放

6、完成后重启才能生效。

npm start

**二、px转vw**

1、安装需要的插件

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

2、index.html修改禁止缩放

3、新建配置文件 .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
        }
      }
    }

4、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中引入并初始化

5、在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
            })
          ]
        }
      }

6、重启后生效

npm start

转载于:https://www.cnblogs.com/wanderfully/p/10832018.html