关于viewport适配移动端，找了一些资料，做个简单的总结
1. 话不多说，首先直接使用vue-cli创建一个vue项目
使用基于webpack的完整模板创建项目: vw_demo
npm install -g vue-cli //下载脚手架包
vue init webpack vw_demo // 下载模板
cd vw_demo // 进入到刚新建的项目
npm install
npm run dev // 运行该项目
最后访问: http://localhost:8080/ 可以得到默认的界面
具体步骤如下：
接下来就是等了
创建好该项目之后就进入正题了
2. 在创建好该项目的基础上，下载安装如下插件
npm i postcss-aspect-ratio-minipostcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-
viewport-units cssnano --save
3. 打开根目录下的 .postcssrc.js文件，默认有如下内容
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field inpackage.json
"autoprefixer": {}
}
}
接下来我们需要做的就是把该所有内容替换为如下内容：
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, unitPrecision: 3, viewportUnit: 'vw' , selectorBlackList: ['.ignore','.hairlines'], minPixelValue: 1, mediaQuery: false }, "postcss-viewport-units":{}, "cssnano":{ preset: "advanced", autoprefixer: false, "posrcss-zindex": false } }}
这里有必要说明一下：
viewportWidth：750, 这里的750是指你当前设计图的大小（总宽度）
viewportHeight: 1334,这里的1334是根据750宽度来指定的
unitPrecision: 3,指定‘px’转换为视窗单位值的小数位数
viewportUnit: 'vw' , 指定转换为视窗的单位
3. 在cssnano的配置中，使用了preset:"advanced",所以要另外安装，安装如下：
npm i cssnano-preset-advanced --save-dev
4. npm run dev 重新跑一下该项目，接下来就可以直接将标注图上所量距离直接写进css代码了
Ok,完事！！！
总结一下
由上面的操作我们完成了从px到vw的转换，那么在实际使用中我们就可以使用标注图上所量距离，所写单位任然为px，不需要任何计算。这里就简单的讲了具体操作，要明白其中细节问题，还得自行找资料。也可能存在一定的问题，望指出好做修改，第一次写博客，也相当于整理了笔记。
