一、应用场景
在很多时候,我们的网站都是要求设计成响应式
也就是网站可以适应于 PC 端、平板和手机端
关于响应式的设计网上有很多教程,大致分为两种:
1.使用一套代码,利用媒体查询来适配不同的屏幕
2.使用两套代码,根据用户的终端不同切加载不同的代码来适配
两种方法各有优势和劣势,自己根据项目需求来确定具体使用哪种方法
本篇博客介绍第一种方法,利用 bootstarp 的栅格系统 + 一些媒体查询来完成网站的响应式设计
如果不知道 vue-cli 项目如何引入 jquery 和 bootstarp 的请参考:vue-cli引入jquery和bootstarp
二、响应式的导航条
bootstarp 给我们提供了很多种导航条的样式,但是普遍的就是样式特别的简单,而且想要在 bootstarp 提供的导航条上面嵌套自己想要的结构和样式不是特别的方便,所以我就自己动手写了一个响应式的导航条(实现方法完全小白式)
我们先看下实现的的效果:
PC端(屏幕尺寸 >= 997px)