基于vue项目的移动端项目，使用vw作为单位适配页面布局

全靠这位大佬的博客：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，希望可以与大家共同学习

最后编辑于：2019.04.25 14:56:09