一、應用場景

在很多時候，我們的網站都是要求設計成響應式

也就是網站可以適應於 PC 端、平板和手機端

關於響應式的設計網上有很多教程，大致分為兩種：

1.使用一套程式碼，利用媒體查詢來適配不同的螢幕

2.使用兩套程式碼，根據使用者的終端不同切載入不同的程式碼來適配

兩種方法各有優勢和劣勢，自己根據專案需求來確定具體使用哪種方法

本篇部落格介紹第一種方法，利用 bootstarp 的柵格系統 + 一些媒體查詢來完成網站的響應式設計

如果不知道 vue-cli 專案如何引入 jquery 和 bootstarp 的請參考：vue-cli引入jquery和bootstarp

二、響應式的導航條

bootstarp 給我們提供了很多種導航條的樣式，但是普遍的就是樣式特別的簡單，而且想要在 bootstarp 提供的導航條上面巢狀自己想要的結構和樣式不是特別的方便，所以我就自己動手寫了一個響應式的導航條（實現方法完全小白式）

我們先看下實現的的效果：

PC端（螢幕尺寸 >= 997px）

平板、手機端效果（螢幕尺寸 < 997px）

OK，看完要實現的效果以後，下面開始實現！

三、實現

1.新建一個Header.vue，大致佈局如下：

<template>
    <!-- 頭部整體盒子 -->
  <div id="header" class="container-fuild">
    <!-- 頭部頂部 -->
    <div class="header-top container-fuild hidden-xs">
        <!-- 頭部頂部容器 -->
      <div class="container">
            //頭部頂部內容
      </div>
    </div>
    <!-- 電腦導航 -->
    <div class="header-nav container hidden-xs">
      <!-- 導航logo -->
      <div class="header-nav-logo">
            //PC端導航logo    
      </div>
      <!-- 導航內容 -->
      <ul class="header-nav-wrapper">
            //PC端導航
      </ul>
    </div>
    <!-- 手機導航 -->
    <div class="header-nav-m container-fuild visible-xs">
      <div class="header-nav-m-logo">
                  //此處寫手機logo圖
      </div>
      <!-- 導航欄 -->
      <div class="header-nav-m-menu text-center">
                //此處寫手機導航樣式
      </div>
    </div>
  </div>
</template>
 

2.實現思路

原本我是想用一套 html 結構通過媒體查詢或者 bootstarp 的一些輔助類來實現在不同的螢幕上顯示不同的樣式

後來發現寫媒體查詢還不如寫兩個導航方便，然後就寫了兩個導航欄，利用 bootstarp 的響應式實用工具來控制在不同的螢幕顯示不同的導航條

PC端的導航條適用於螢幕尺寸大於997px的螢幕，手機端的導航條適用於螢幕尺寸小於997px的螢幕，然後分別寫樣式即可

3.使用的東西

其實寫起來PC端的樣式還是挺麻煩的，因為寫的效果比較好點，手機端就比較方便了

主要使用到的東西就是 bootstarp 的輔助類

.container——固定寬度容器 相當於margin: 0 auto

.container-fuild——100%寬度容器

.text-center——文字居中

.center-block——塊居中

.hidden-xs——在手機端隱藏

.visible-xs——在手機端顯示

.collapse——摺疊外掛

OK，到此響應式的導航條就封裝完成了，大概有350行程式碼輕鬆搞定！

下載地址：vue-cli+bootstarp響應式導航欄

下載後請注意修改22行和48行的logo圖片地址