本文介绍了响应式设计的概念，重点讲解了通过CSS Media Query实现不同屏幕尺寸的适应，以及Bootstrap框架在构建响应式布局中的应用。Bootstrap提供了一个移动优先的前端框架，包括栅格系统和丰富的组件，适合快速开发多终端页面。通过实例展示了如何使用Bootstrap创建导航条和巨幕，以及在Chrome开发者工具中测试响应式效果。
这一周主要接触了进行响应式布局的两种主要方法：第一个方法是通过CSS 中的Media Query媒体查询，第二个是基于Bootstrap框架。趁这个机会也去学习了一些关于Bootstrap的知识。
1.什么是响应式布局？
Responsive design,可以检测设备信息，实现不同屏幕分辨率的终端上浏览网页的效果，让用户们有很好的阅读体验。但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，所以这种布局往往用在一些以浏览内容为主的网站上，比如：官网，新闻网。
2.Media Query媒体查询
查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。
- 超小屏 extra small <768px
- 小屏 small >=768px
- 中等 medium >=992px
- 大屏 large >=1200px
根据屏幕尺寸变化颜色代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body{
background-color: black;
}
@media screen and (min-width: 768px){ /*大于等于768*/
body{
background-color: red;
}
}
@media screen and (min-width: 992px){ /*大于等于992*/
body{
background-color: green;
}
}
@media screen and (min-width: 1200px){ /*大于等于1200*/
body{
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>3.基于Bootstrap框架
Bootstrap框架是一个开源、移动优先的前端框架，是基于HTML、CSS、JavaScript、JQuery的，写很少代码，实现多终端的页面搭配。它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
中文官网：http://www.bootcss.com/
进入Bootstrap官网进行下载，我下载的是第一个，然后下载成功后会有下面一个文件夹
于是我们有两种方法引用Bootstrap，一种是把下载的bootstrap-3.3.7-dist文件夹放入所要用到Bootstrap框架的项目的文件夹中，再进行引用；第二种是直接利用CDN从网上引用，但是如果没有网就引用不了了，引用代码如下：
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstra
p.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="b1.css">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstra
p-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
- Bootstrap 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
</div>
<div class="col-xs-6 col-lg-8">
<h2>HTML</h2>
</div>
</div>
- 栅格系统是往上兼容的,意味着小屏幕上的效果在大屏幕上也是可以正常显示的人，但是大屏幕上的设置在小屏幕上却无法正常显示。
学完了用Bootstrap完成响应式布局，我们其实还可以用Bootstrap做出很多东西，回到官网，点击导航栏的组件，任意选一个比如说常用的导航条，会发现Bootstrap提供了模板和效果。
我用了导航栏和巨幕的中的源代码做出了一个简单的页面：
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">前端</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">视频 <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">资料 <span class="caret">
</span></a>
<ul class="dropdown-menu">
<li><a href="#">ppt</a></li>
<li><a href="#">code </a></li>
<li><a href="#">...</a></li>
</ul>
</li>
<li><a href="#">作业</a></li>
<li><a href="#">讨论</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<!-- .col-sm-9+.col-sm-3 -->
<div class="col-sm-9">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<!-- 详细内容 -->
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quaerat deleniti voluptas harum ab perferendis, ducimus hic expedita asperiores vero quas quod ex. Necessitatibus, officia ut laudantium architecto labore praesentium.</p>
<p><a class="btn btn-default"href="#">开始学习</a></p>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quaerat deleniti voluptas harum ab perferendis, ducimus hic expedita asperiores vero quas quod ex. Necessitatibus, officia ut laudantium architecto labore praesentium.</p>
<p><a class="btn btn-default"href="#">开始学习</a></p>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quaerat deleniti voluptas harum ab perferendis, ducimus hic expedita asperiores vero quas quod ex. Necessitatibus, officia ut laudantium architecto labore praesentium.</p>
<p><a class="btn btn-default"href="#">开始学习</a></p>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quaerat deleniti voluptas harum ab perferendis, ducimus hic expedita asperiores vero quas quod ex. Necessitatibus, officia ut laudantium architecto labore praesentium.</p>
<p><a class="btn btn-default"href="#">开始学习</a></p>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quaerat deleniti voluptas harum ab perferendis, ducimus hic expedita asperiores vero quas quod ex. Necessitatibus, officia ut laudantium architecto labore praesentium.</p>
<p><a class="btn btn-default"href="#">开始学习</a></p>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quaerat deleniti voluptas harum ab perferendis, ducimus hic expedita asperiores vero quas quod ex. Necessitatibus, officia ut laudantium architecto labore praesentium.</p>
<p><a class="btn btn-default"href="#">开始学习</a></p>
</div>
</div>
</div>
<div class="col-sm-3">
<ul class="list-group">
<li class="list-group-item">最新公告</li>
<li class="list-group-item">最新讨论</li>
<li class="list-group-item">最新作业</li>
</ul>
</div>
</div>
</div>
</body>并且我们可以在Chrome中的开发者工具中调整屏幕尺寸，来观察网页的变化（响应式布局）
欢迎大家加入人工智能圈参与交流
人工智能学习圈 - 知乎
扫一扫
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
