前端適配可以說是前端工程師一個永恒的話題漆际，而解決方案也是層出不窮，其目的都是為了在各個分辨率中最大程度還原設(shè)計稿拇颅。今天給大家介紹的是vw兼容方案荧恍，其原理就是根據(jù)視口寬度自動計算頁面上的尺寸，無論高度拢军、寬度楞陷，還是字體。
第一步：用vue-cli快速構(gòu)建出一個項目
通過腳手架生成的項目應(yīng)該是如下結(jié)構(gòu)：
第二步：安裝插件
為了實現(xiàn)vw兼容方案茉唉，我們需要安裝如下插件：
postcss-import 相關(guān)配置
主要功有是解決@import引入路徑問題固蛾。使用這個插件，可以很輕易的使用本地文件度陆、node_modules或者web_modules的文件艾凯。這個插件配合postcss-url使引入文件變得更輕松。postcss-url 相關(guān)配置
主要用來處理文件懂傀，比如圖片文件趾诗、字體文件等引用路徑的處理。postcss-px-to-viewport 相關(guān)配置
主要用來把px單位轉(zhuǎn)換為vw鸿竖、vh沧竟、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一缚忧。postcss-viewport-units 相關(guān)配置
主要是給CSS的屬性添加content的屬性悟泵，給vw、vh闪水、vmin和vmax做適配的操作糕非，這是實現(xiàn)vw布局必不可少的一個插件。postcss-cssnext 相關(guān)配置
該插件可以讓我們使用CSS未來的特性球榆，其會對這些特性做相關(guān)的兼容性處理朽肥。cssnano 相關(guān)配置
主要用來壓縮和清理CSS代碼。在Webpack中持钉，cssnano和css-loader捆綁在一起衡招，所以不需要自己加載它。postcss-write-svg 相關(guān)配置
主要用來處理移動端1px的解決方案postcss-aspect-ratio-mini 相關(guān)配置
主要用來處理元素容器寬高比
在自動構(gòu)建的項目根目錄里面我們能看到一個叫.postcssrc.js的文件每强，文件默認內(nèi)容：
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {},
}
}
不難發(fā)現(xiàn)腳手架已經(jīng)幫我們默認安裝了postcss-import和postcss-url始腾，所以我們只需要手動安裝剩余插件:
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --S
安裝成功之后在項目根目錄下的package.json中可以看到新安裝的依賴包：
"dependencies": {
"cssnano": "^4.1.10",
"cssnano-preset-advanced": "^4.0.7",
"postcss-aspect-ratio-mini": "^1.0.1",
"postcss-cssnext": "^3.1.0",
"postcss-px-to-viewport": "^1.1.1",
"postcss-viewport-units": "^0.1.6",
"postcss-write-svg": "^3.0.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
}
第三步：插件配置
在.postcssrc.js文件中做如下修改
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // 視窗的寬度，對應(yīng)的是我們設(shè)計稿的寬度空执，移動端一般是750浪箭，如果是pc端那就是類似1920這樣的尺寸
viewportHeight: 1344, // 視窗的高度，移動端一般指定1334辨绊，也可以不配置
unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時候無法整除）
viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位奶栖，建議使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位宣鄙，你也可以設(shè)置為你想要的值
mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`
},
"postcss-viewport-units":{},
"cssnano": {
preset: "default", // 設(shè)置成default將不會啟用autoprefixer
"postcss-zindex": false
}
}
}
特別聲明：
由于cssnext也具有autoprefixer,只需要一個就夠了袍镀，所以把默認的autoprefixer刪除掉
postcss-zindex設(shè)置成false，如果不這樣做冻晤，z-index的值就會重置為1流椒，所以千萬記得將postcss-zindex設(shè)置為false。
postcss-px-to-viewport 的配置在注釋里面寫的很清楚明也，如果還有疑問可以到github查看 相關(guān)配置，由于修改了配置文件惯裕，不要忘記重啟一下項目：npm run dev温数。
好了，如果上面三個步驟都正確執(zhí)行蜻势，我們的項目就成功的集成了vw解決方案撑刺，現(xiàn)在我們來驗證一下：
如果我們的設(shè)計稿寬度為750px，在.postcssrc.js中配置viewportWidth為750握玛，在編碼過程中够傍，設(shè)計稿上面的長寬是多少我們就寫多少，單位為px不需要進行任何換算挠铲，比如實現(xiàn)一個長寬始終為視口寬度一半的正方形：
<div class="test">111</div>
<style>
.test{
width: 375px; // 750/2
height:375px;
background: skyblue;
text-align: center;
line-height: 375px;
font-size: 40px;
}
<style>
預(yù)覽頁面改變視口寬度冕屯，不管哪種分辨率正方形寬度形始終占一半，且文字大小也跟隨寬度成正比縮放
查看頁面元素拂苹，可以看到編譯后的代碼安聘，postcss幫我們完成了換算，把px轉(zhuǎn)換為vw單位瓢棒，并且每個類多了content的屬性浴韭，這是為了解決vw的兼容問題。
.test {
width: 50vw; // 350/750*100
height: 50vw;
background: #87ceeb;
line-height: 50vw;
font-size: 5.333vw; // 40/750*100
content: "viewport-units-buggyfill; width: 50vw; height: 50vw; line-height: 50vw; font-size: 5.333vw";
}
參考文獻：
http://www.reibang.com/p/1f1b23f8348f
http://www.reibang.com/p/5b54be9dc063
