前端响应式布局与Bootstrap栅格系统快速了解与应用

一.响应式开发快速了解：

你好呀~(♥◠‿◠)ﾉ ，不知道你看到这篇文章的时候是几点了，不过我现在是深夜00:15分。每次到这个时间我反倒有了种安心的感觉，没有消息没有通知没有什么会打扰我。我喜欢夜晚这种静谧的感觉，特别是夏天的夜。出去抬头还能看到一闪一闪星星，我也喜欢星星。今天倒是没有什么特别的要分享的，那就分享一些前端基础的响应式布局的知识把。

响应式开发可以使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。媒体查询就是使用 @media 查询，它可以针对不同的屏幕尺寸定义不同的样式。简单来说就是同一页面要在不同尺寸的设备显示不同的布局排列方式。

媒体查询@media的CSS语法 例子：

@media mediatype and|not|only (media feature) { CSS-Code; }

media官方使用文档链接：https://www.runoob.com/cssref/css3-pr-mediaquery.html

不同设备一般尺寸区间如下：

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，然后子元素的排列方式和大小也改变，最终达到不同尺寸屏幕下，看到不同的页面布局和样式。

首先，media官方使用文档链接：https://www.runoob.com/cssref/css3-pr-mediaquery.html

比如有一个div盒子，在不同的屏幕尺寸大小呈现不同的宽度：

初始代码如下，还没定义宽度：

.container{ height: 100px; background-color: skyblue; margin: 0 auto; }

（1）手机屏幕下，小于768px时设置100%宽：

.container{ height: 100px; background-color: skyblue; margin: 0 auto; } @media screen and (max-width: 767px){ .container{ width: 100%; } }

（2）平板屏幕下，设置750px宽：

@media screen and (min-width: 768px){ .container{ width: 750px; } }

（3）中等屏幕下，设置970px宽：

@media screen and (min-width: 992px){ .container{ width: 970px; } }

（4）大屏幕下，设置1170px宽：

@media screen and (min-width: 1200px){ .container{ width: 1170px; } }

效果：

做一个响应式导航栏，效果如下：

代码：

• 导航
• 导航
• 导航
• 导航
• 导航
• 导航
• 导航
• 导航

*{ margin: 0; padding: 0; } .container{ width: 750px; background-color: skyblue; margin: 0 auto; } .container ul li{ width: calc(750px / 8); height: 30px; background-color: rgb(21, 240, 192); float: left; list-style: none; } @media screen and (max-width:767px){ .container{ width: 100%; } .container ul li{ width: calc(100% / 3); } }

二.bootstrap快速了解与应用：

Bootstrap 自称是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。不过这东西我认为看开发需求和场景等等而定，有时写简单的vue项目可能用element-ui多一些。不过肯定是都要了解的。

官方使用文档为：https://v3.bootcss.com/

Bootstrap里有很多现成封装好的组件，可以直接复制拿来使用。

首先引入bootstrap，我这里直接在html单页面通过链接引入即可。也可以通过npm下载或者下载包等等方式引入，这些可以查看官方文档。官方给的html单页面基本模板如下，可去官方文档查看：