react项目使用vw，首先安装postCss插件

npm i –save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced

安装完成后打开config/webpack.config.dev.js文件，react默认隐藏webpack配置，如果没有，请执行npm run eject。

将以下代码加入。

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');
01.
02.
03.
04.
05.
06.

接着找到如下代码

{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      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',
          }),
          //这里加入代码
        ],
      },
    },
  ],
},
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

然后把下面的代码复制进去

postcssAspectRatioMini({}),
postcssPxToViewport({ 
    viewportWidth: 750, // (Number) The width 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 
})
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

最后npm start即可看到效果。

VUE项目使用vw，首先还是安装以下插件

npm i –save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced postcss-import postcss-url

安装完成后，打开根目录的.postcssrc.js配置如下内容。

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {},
    "postcss-import": {}, 
    "postcss-url": {}, 
    "postcss-aspect-ratio-mini": {}, 
    "postcss-write-svg": { 
      utf8: false 
    },
    "postcss-cssnext": {}, 
    "postcss-px-to-viewport": { 
      viewportWidth: 750, // (Number) The width 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 
    }
  }
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

最后npm run dev即可查看效果。

如果需要某些元素不使用vw单位，可以设置配置文件中的selectorBlackList里面的类名，该属性可无限添加，随便自定义，不需要转换的单位需要写在该类名上才可生效。

以上是纯vw写法，其实配合rem来写的话，相对更简单，也不用安装那么多插件来配置。如下，设置html的font-size，后面的写法基本上同flexible写法一致了。

html{font-size: 13.3333vw;/*750设计稿， 100/7.5 */}   
div{font-size: .3rem; /*设计稿字体大小为30px的话，30/100 */ }
01.
02.

html{font-size: 10vw; /* 100/10 */}   
div{font-size: .4rem;/*设计稿字体大小为30px的话，30/75*/ }
01.
02.

上面第一种是将页面分成7.5份，这样换算rem相对简单，直接除100即可。如果你是用sublime的px to rem的话，那就无所谓第一种还是第二种了，反正插件会自己换算。

如果你不想用react和vue那些插件，也不想用rem，那么可以修改sublime的插件，打开sublime -> Preferences -> browse packgaes -> cssrem-master -> cssrem.py，把rem单位改为vw，然后在自定义配置里设置”px_to_rem”: 7.5,即可

这里有个vw例子