一、应用场景
在很多时候，我们的网站都是要求设计成响应式
也就是网站可以适应于 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行代码轻松搞定！
下载后请注意修改22行和48行的logo图片地址