使用vw,vh 來作移動端適配

咱們作移動端項目的時候須要安裝以下的插件；

• postcss-import
• postcss-url
• autoprefixer  這個不用安裝，Vue-cli 已經集成進去了
• postcss-aspect-ratio-mini
• postcss-cssnext
• postcss-px-to-viewport 核心
• cssnano
• cssnano-preset-advanced

而後在package.json文件中配置

"postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-import": {},
            "postcss-url": {},
            "postcss-aspect-ratio-mini": {},
            "postcss-cssnext": {},
            "postcss-px-to-viewport": {
                "viewportWidth": "750", //視窗的寬度，對應的是咱們設計稿的寬度，通常是750
                "unitPrecision": "3",//指定`px`轉換爲視窗單位值的小數位數（不少時候沒法整除）
                "viewportUnit": "vw", //指定須要轉換成的視窗單位，建議使用vw
                "selectorBlackList": [ //指定不轉換爲視窗單位的類，能夠自定義，能夠無限添加,建議定義一至兩個通用的類名
                    ".ignore",
                    ".hairlines"
                ],
                "minPixelValue": 1, // 小於或等於`1px`不轉換爲視窗單位
                "mediaQuery": false// 容許在媒體查詢中轉換`px`
            },
            "cssnano": {
                "preset": "advanced",
                "autoprefixer": false,
                "postcss-zindex": false //只要啓用了這個插件，z-index的值就會重置爲1,必定關閉
            }
        }
    }

 

　　這樣，直接按照750設計稿寫px 單位就能夠了