全靠这位大佬的博客：http://www.cnblogs.com/zhaobao1830/p/9431454.html
今天mark 一下，顺便学习一下
学习之前需要知道的东西
100vw = 视口的宽度 （iphone6 750*1334,那么100vw = 750px，1vw = 7.5px）
* vw : 1vw 等于视口宽度的1%
* vh : 1vh 等于视口高度的1%
* vmin : 选取 vw 和 vh 中最小的那个
* vmax : 选取 vw 和 vh 中最大的那个
视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。
- vue-cli 脚手架搭建环境
npm install -g vue-cli
- 初始化一个vue项目
vue init webpack projectName
- 接下来就是进入项目的所在文件夹，启动项目了
cd projectName
npm run dev
- 安装插件
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
- 配置.postcssrc.js
我在这里mark一下，具体的可以参考顶部那位大佬的链接，里面说得很详细了。
module.exports = {
"plugins": {
"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.
viewportHeight: 1334, // (Number) The height 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
}
}
}
特别声明：由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。对于其他的插件使用，稍后会简单的介绍。
接下来就是重新启动项目npm run dev了
但是此刻项目会报错，楼上那位大佬貌似不会，我看了下报错，大概时候的是我依赖包的版本问题，只需要安装npm i cssnano-preset-advanced --save-dev就解决了，我贴一下报错的截图
微信图片_20190425142904.png
然后就没有然后，项目里直接使用px 作为单位，插件就会自动帮你转换成vw了。
最后还要mark一下另外一位大佬的博客，对于我个人来说还是获益匪浅
http://caibaojian.com/vw-vh.html，希望可以与大家共同学习
网友评论