如何在Vue項目中使用vw實現移動端適配

很早以前就看過大漠的這篇博文，當時就覺得很牛逼，那個時候沒有在項目中用vue不過也跟着搭建了一個H5的適配方式。
現在大漠的博文都收費了，不過在網上找到了其轉載的文章，很開心，放下地址:https://blog.csdn.net/mnhn456/article/details/82344315
接下來要在項目中搭建就比較容易了

我擔心版本不一致會影響
直接修改了package.json的文件

"dependencies": {
    "cssnano": "^3.10.0",
    "postcss-aspect-ratio-mini": "0.0.2",
    "postcss-cssnext": "^3.1.0",
    "postcss-px-to-viewport": "0.0.3",
    "postcss-viewport-units": "^0.1.3",
    "postcss-write-svg": "^3.0.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
},

接下來在.postcssrc.js文件對新安裝的PostCSS插件進行配置：

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
        }
    }
}

cssnano
cssnano主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己加載它。不過你也可以使用postcss-loader顯式的使用cssnano。有關於cssnano的詳細文檔，可以點擊這里獲取。

在cssnano的配置中，使用了preset: "advanced"，所以我們需要另外安裝：

npm i cssnano-preset-advanced --save-dev

cssnano集成了一些其他的PostCSS插件，如果你想禁用cssnano中的某個插件的時候，可以像下面這樣操作：

"cssnano": {
    autoprefixer: false,
    "postcss-zindex": false
}

上面的代碼把autoprefixer和postcss-zindex禁掉了。前者是有重復調用，后者是一個討厭的東東。只要啟用了這個插件，z-index的值就會重置為1。這是一個天坑，千萬記得將postcss-zindex設置為false。
很多同學都不敢嘗這個螃蟹。害怕去處理兼容性的處理。不過不要緊，今天我把最終的解決方案告訴你。

最終的解決方案，就是使用viewport的polyfill：Viewport Units Buggyfill。使用viewport-units-buggyfill主要分以下幾步走：

引入JavaScript文件
viewport-units-buggyfill主要有兩個JavaScript文件：viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js。你只需要在你的HTML文件中引入這兩個文件。比如在Vue項目中的index.html引入它們：

<--script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

第二步，在HTML文件中調用viewport-units-buggyfill，比如：

    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        });
    }

為了你Demo的時候能獲取對應機型相關的參數，我在示例中添加了一段額外的代碼，估計會讓你有點煩：

    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
        });
 
        var winDPI = window.devicePixelRatio;
        var uAgent = window.navigator.userAgent;
        var screenHeight = window.screen.height;
        var screenWidth = window.screen.width;
        var winWidth = window.innerWidth;
        var winHeight = window.innerHeight;
 
        alert(
            "Windows DPI:" + winDPI +
            ";\ruAgent:" + uAgent +
            ";\rScreen Width:" + screenWidth +
            ";\rScreen Height:" + screenHeight +
            ";\rWindow Width:" + winWidth +
            ";\rWindow Height:" + winHeight
        )
    }

另外需要安裝postcss-viewport-units插件。這個插件將讓你無需關注content的內容，插件會自動幫你處理。
比如運行我的demo
可以看到

基本上算是大功告成