我们直接来正题吧：
方案一：（rem+vw）
现代浏览器支持设备屏幕宽度为100vw，也就是把设备宽度分成了10份，每一份为10vw，而对于常见的移动度设备宽度。一般为375（750）。我们可以得到这样一个关系：
100vw=375(750)px.我们以具体的750为例。
100vw被划分为750px,那1px=100/750=0.133333vw，那100px=13.3333vw,而我们知道：1rem等于html根元素设定的font-size的px值，那此时如果我们把html的根字体大小设置成13.333vw,那就意味着1rem=13.333vw,也就是1rem=13.333vw=100px，那我们就建立了rem和px之间的关系。1rem=100px，这样我们在面对设计稿进行黄色的时候就可以直接通过写rem来解决问题了。比如设计稿:给我们的样式如下 .wrap{ width:320px;height:180}, 那根据换算规则。我们可以直接写成.wrap{width:3.2rem,1.8rem}
这个解决方案核心还是利用了rem来实现。只是巧妙的利用了vw进行了一次中间转化
方案二：纯vw解决方案
我们知道浏览器支持设备屏幕宽度为100vw，也就是把设备宽度分成了10份，每一份为10vw，而对于常见的移动度设备宽度。一般为375(750),也就是说
对于750的设计稿： 1px=100/750=0.133333333vw；
对于375的设计稿 ： 1px=100/375=0.266666666vw
那如果我们把所有的px能全部转化为vw不就解决问题了。比如
比如设计稿（375为例）:
.wrap{ width:310px;height:180px}。那我们直接换算成vw单位就是
width：310*0.26666~=82.667vw
height:180*0.266666=47.99999vw ~=48vw
唯一的缺陷就是每次都要手动计算。非常繁琐，幸好社区有一个插件帮我们解决了这个问题，那就是postcss-px-to-vw.我们只需要安装以后做基本配置，然后项目中继续对着设计稿写px，运行以后它会自动转化为vw单位。
step1： 安装 npm i postcss-px-to-viewport -S
step2 ： 根目录新建一个postcss.config.js,做如下配置：
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px", // 默认值`px`，需要转换的单位
viewportWidth: 375, //视窗的宽度，对应的是我们设计稿的宽度 375 unitPrecision: 3, //指定`px`转换为视窗单位值的小数位数，默认是5(很多时候无法整除)
viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw
fontViewportUnit: 'vw', //指定字体需要转换成的视窗单位，默认vw;
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位
mediaQuery: false, // 允许在媒体查询中转换`px`，默认false
exclude: [/node_modules/], //如果是regexp, 忽略全部匹配文件;如果是数组array, 忽略指定文件
}
}
}
运行后 转化
这里特别注意：
