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