目前出视觉设计稿，我们都是使用750px宽度的，从上面的原理来看，那么100vw = 750px，即1vw = 7.5px，我们可以根据设计图中的px直接转换成对应的vw值，又要开始计算，我们可以使用postcss的插件postcss-px-to-viewport，我们直接写px，postcss编译之后就是我们需要的vw。
实际是哟女的时候，我们可以进行相关参数配置
"postcss-px-to-viewport": { viewportWidth: 750, viewportHeight: 1334, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false }哪些地方是可以使用vw来适配的？
（1）容器适配，可以使用vw；
（2）文本适配，使用vw；
（3）大于1px的边框，圆角，阴影都可以使用vw；
（4）内距和外距，可以使用vw；
解决retina下的1px方案，依旧是使用postcss插件，postcss-write-svg，使用postcss-write-svg你可以通过border-image或者background-image两种方式来处理。
.example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; //或者使用background-image //background: white svg(square param(--color #00b1ff)); }这样PostCSS会自动帮你把CSS编译出来：
.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff'/%3E%3C/svg%3E") 2 2 stretch; // background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff'/%3E%3C/svg%3E"); }还需要在head中添加
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
四、我理解的最佳实践
1、用户体验要求很高的页面，如UV较高的页面，活动页这些应该以用户体验优先，使用vw是实现页面的适配，通过postcss-px-to-viewport把px转换成vw；更好实现长宽比(针对img，video，iframe)，通过postcss-aspect-ratio-mini插件实现；为了解决1px的问题，使用post-write-svg，自动生成borde-image或者background-image的图片。
注意：px转换成vw，多少会存在一定的像素误差，无法完全整除。
2、在其他页面，股东视口，不缩放，使用rem做布局适配，js添加屏幕标识以便调整字体大小，使用@2x图片，只做ios8+的1px处理
五、参考
1、https://www.w3cplus.com/css/vw-for-layout.html