2019-5-29 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近折騰自己的網站，在自適應方面發現有了很多新的方法，感嘆前端的技術真是日新月異，從以前只能這樣，到現在除了這樣，還可以那樣，甚至再那樣......技術永無止境啊。
回到主題，自適應響應式布局這個話題古老而新穎，從最早的不同分辨率的屏幕，到現在遍布各個生活角落的移動設備，響應式布局已經成了幾乎所有互聯網公司必備的條件。在我的映像中，bootstrap一直是響應式的頭號選擇，的確，其中的各種xl，xs，柵格布局讓響應式變得很容易。
話說，這Vue做響應式，其實一點都不復雜：一個生命周期鉤子，一個條指令，一套js判斷語句解決，說到這，高手們應該早已經明白如何操作了， 這篇文章就給廣大剛入門的同學們拓寬一下吧（不熟悉Vue的同學，還是先惡補一下Vue基礎吧）。
一個生命周期鉤子——mounted：掛載時操作；一條指令——v-show（本例中采用，非絕對）：根據條件顯示；一套js判斷語句：if/else或者switch/case。具體操作起來很簡單：（代碼直接展示）
<!--這是一段導航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(){
//可用于設置自適應屏幕，根據獲得的可視寬度（兼容性）判斷是否顯示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移動設備中不顯示搜索欄（search-part）部分，那么利用v-show,和mounted配合，在掛載時檢測一下屏幕可視寬度，如果小于1000，則認為是手機，v-show設為false,不顯示即可。
看，很簡單吧，簡單到我覺得自己好像在忽悠。其實到這里，原理已經說完，具體的應用大家可以自行發揮，而且也不一定就用v-show，我這里是為了顯示與否，如果大家想添加樣式什么的，還可以寫別的，甚至于計算屬性，watch都可以。只要記住在掛載的時候完成即可，不然頁面會有跳動，不利于體驗。
可能有人會問，用css的@media就可以完成了，為啥用js，我這里想說的是，我并沒有否認@media，這里只是寫出更多一種方式，同時結合一下現在很火的前端框架。多一種方法，就多一種解決思路，不至于再回到以前"只能這樣"的道路上。具體到實際應用中，當然是最適合的方法為主。前端水深，前端的路子也越來越多，越來也豐富，敞開思維，就會看見不同的天空。
ps一句，js確實需要刷新頁面重新加載才會顯示，也就是說如果用戶將頁面從大屏移動到小屏幕，就可能出現布局不響應問題，但是在實際使用中，這種情況幾乎不會出現，因為用戶不能可能將電腦打開的網頁，直接移動到手機上，操作永遠都是重新打開，所以js，css在顯示效果上是沒有區別的（當然如果js太過復雜，性能會有影響）。另外，文中方法的兼容性問題，只要支持Vue的瀏覽器，都沒問題。
就說到這吧，歡迎大神指正，不勝感激！
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。