如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

最近折騰自己的網(wǎng)站，在自適應(yīng)方面發(fā)現(xiàn)有了很多新的方法，感嘆前端的技術(shù)真是日新月異，從以前只能這樣，到現(xiàn)在除了這樣，還可以那樣，甚至再那樣......技術(shù)永無(wú)止境啊。

回到主題，自適應(yīng)響應(yīng)式布局這個(gè)話題古老而新穎，從最早的不同分辨率的屏幕，到現(xiàn)在遍布各個(gè)生活角落的移動(dòng)設(shè)備，響應(yīng)式布局已經(jīng)成了幾乎所有互聯(lián)網(wǎng)公司必備的條件。在我的映像中，bootstrap一直是響應(yīng)式的頭號(hào)選擇，的確，其中的各種xl，xs，柵格布局讓響應(yīng)式變得很容易。

話說(shuō)，這Vue做響應(yīng)式，其實(shí)一點(diǎn)都不復(fù)雜：一個(gè)生命周期鉤子，一個(gè)條指令，一套js判斷語(yǔ)句解決，說(shuō)到這，高手們應(yīng)該早已經(jīng)明白如何操作了， 這篇文章就給廣大剛?cè)腴T的同學(xué)們拓寬一下吧（不熟悉Vue的同學(xué)，還是先惡補(bǔ)一下Vue基礎(chǔ)吧）。

一個(gè)生命周期鉤子——mounted：掛載時(shí)操作；一條指令——v-show（本例中采用，非絕對(duì)）：根據(jù)條件顯示；一套js判斷語(yǔ)句：if/else或者switch/case。具體操作起來(lái)很簡(jiǎn)單：（代碼直接展示）

<!--這是一段導(dǎo)航html-->
<nav id="nav-part" class="easyUtil-backImgPostion easyUtil-flexContainerRow">
<ul class="easyUtil-flexContainerRow">
<li class="nav-list" :class="nav.className" v-for="(nav,i) in navs">
<a :href="nav.href">{{nav.name}}</a>
</li>
</ul>
<div id="serach-part" v-show="show"><input type="search" id="search" :placeholder="placeholder" class="easyUtil-input"><button id="searchBtn" class="easyUtil-btn">{{btn}}</button></div>
</nav>
var head = new Vue({
el : "#head",
data : {
        //此處省略一千字
show : true
},
mounted : function(){
//可用于設(shè)置自適應(yīng)屏幕，根據(jù)獲得的可視寬度（兼容性）判斷是否顯示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移動(dòng)設(shè)備中不顯示搜索欄（search-part）部分，那么利用v-show,和mounted配合，在掛載時(shí)檢測(cè)一下屏幕可視寬度，如果小于1000，則認(rèn)為是手機(jī)，v-show設(shè)為false,不顯示即可。

看，很簡(jiǎn)單吧，簡(jiǎn)單到我覺(jué)得自己好像在忽悠。其實(shí)到這里，原理已經(jīng)說(shuō)完，具體的應(yīng)用大家可以自行發(fā)揮，而且也不一定就用v-show，我這里是為了顯示與否，如果大家想添加樣式什么的，還可以寫別的，甚至于計(jì)算屬性，watch都可以。只要記住在掛載的時(shí)候完成即可，不然頁(yè)面會(huì)有跳動(dòng)，不利于體驗(yàn)。

可能有人會(huì)問(wèn)，用css的@media就可以完成了，為啥用js，我這里想說(shuō)的是，我并沒(méi)有否認(rèn)@media，這里只是寫出更多一種方式，同時(shí)結(jié)合一下現(xiàn)在很火的前端框架。多一種方法，就多一種解決思路，不至于再回到以前"只能這樣"的道路上。具體到實(shí)際應(yīng)用中，當(dāng)然是最適合的方法為主。前端水深，前端的路子也越來(lái)越多，越來(lái)也豐富，敞開(kāi)思維，就會(huì)看見(jiàn)不同的天空。

ps一句，js確實(shí)需要刷新頁(yè)面重新加載才會(huì)顯示，也就是說(shuō)如果用戶將頁(yè)面從大屏移動(dòng)到小屏幕，就可能出現(xiàn)布局不響應(yīng)問(wèn)題，但是在實(shí)際使用中，這種情況幾乎不會(huì)出現(xiàn)，因?yàn)橛脩舨荒芸赡軐㈦娔X打開(kāi)的網(wǎng)頁(yè)，直接移動(dòng)到手機(jī)上，操作永遠(yuǎn)都是重新打開(kāi)，所以js，css在顯示效果上是沒(méi)有區(qū)別的（當(dāng)然如果js太過(guò)復(fù)雜，性能會(huì)有影響）。另外，文中方法的兼容性問(wèn)題，只要支持Vue的瀏覽器，都沒(méi)問(wèn)題。

就說(shuō)到這吧，歡迎大神指正，不勝感激！
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。