react移动端适配之vw适配 postcss-px-to-viewport插件

vw适配

vw适配实际上就是通过postcss-px-to-viewport 插件将项目中px单位转化为vw单位实现移动端适配。

react中使用实现步骤。

1. 在我们使用postcss-px-to-viewport插件时需要修改react webpack配置，但是在react-cli中 webpack配置默认不会暴露给开发者，这个时候我们就需要想办法找到webpack配置文件，不过也很简单，react为我们提供了方法，这个方法我们称之为解压配置。
   那么如何解压配置。
   第一步
   提交git仓库 因为在暴露配置项的过程是不可逆的所以在暴露之前必须提交git。

      git add .
	git commit -m '暴露项目配置项'

第二步
使用命令解压配置项

npm run eject

解压成功后可以看到项目目录中多了两个文件夹config和scripts文件夹
那么webpack配置就在config文件夹下

2. 安装：postcss-px-to-viewport 和 postcss-loader

npm install postcss-loader postcss-px-to-viewport --save-dev

3.配置webpack
在config文件夹下webpack.config.js配置文件中编写配置

750