写在前面的话：响应式布局总结的根本是媒体查询，只要搞明白媒体查询，那么响应式的页面布局也就简简单单，轻轻松松。
以下为bootstrap 里面 container的媒体查询代码：将屏幕分为4部分
1.什么是响应式
所谓响应式页面，是指一套页面，能够适配多种终端，比如宽屏pc电脑，平板，手机，听起来极为的棒，但是，响应式布局极容易出现各式各样的兼容问题，目前社会主流布局方案，依然是单独制作移动端页面，所以对响应式，只要抱着能看懂，能做出简单的网页布局即可。
2.响应式基础知识
bootstrap框架
只要搞明白bootstrap框架，那么响应式你已经成功。
bootstrap框架能够帮助我们只需要调用类名，就可以轻松实现某种效果，极为便利。
但是要使用bootstrap框架必须要遵守bootstrap框架的规范。
bootstrap框架基础知识
栅格：
什么是栅格？想象我们小时候的田字格本子，栅格就是一条条竖线，将容器container平均的分成12份，每一份所占的大小是相同的，这样我们在布局盒子时，只需要确定盒子占屏幕宽度的几分，就可以实现响应式布局
容器：
container 响应式页面结构全部都要包含在container容器的盒子里，bootstrap框架，内置媒体查询，通过检测屏幕宽度，来更改container的宽度，从而达到响应式的目的，所以响应式布局，最外层的盒子一定是container container默认将盒子大小平均分成12份。
行 ：
row row能够抵消container自带的内边距padding：左右15px的内边距
列：
column 通过控制col-xs-份数 来控制盒子的宽度大小
屏幕划分：
设备划分尺寸区间超大屏 lg>=1200px中屏 md992px - 1200px小屏 sm768px-992px超小屏幕 xs<768px
屏幕划分便是响应式依据媒体查询的地方，可以通过类名来控制子盒子占据父盒子宽度的几分之几。
例如：我想要一个盒子，在超大屏下，占5份，在中屏下占8份，在小屏下占2份，在超小屏幕下占9份。
使用：bootstrap
第一，网站下载 推荐网站 Bootstrap中文网
第二：文件中引入 <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
第三：创建容器 .container
第四：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
以上代码可有可无，有则更好，条件注释：主要是为了照顾ie9以下的浏览器版本
<body>
<!-- bootstrap 栅格系统 默认将container划分成12列 超大屏 lg 中屏 md 小屏 sm 超小屏 xs -->
<!-- 如何使用栅格系统完成布局 因为我们要做的是一个页面来响应不同的屏幕尺寸，所以我们需要考虑四个方面，分别是超大屏，中等屏幕（pc），小屏幕（平板），超小屏幕（手机） 那么我们就需要分别排版，先排超大屏幕下的效果，再中等，再小屏，最后再超小屏幕，这样就实现了响应式布局 记住，划分份数是对列进行划分，需要在前头加上col -->
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div> -->
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>
</body>
列嵌套
在排版中，我们经常性的会遇到这种排版情况
左边一个盒子，右边一个盒子，左边盒子里面又有两个小盒子。
这就是所谓的列嵌套。
如何实现列嵌套？
在列的里面，再放一个行，列嵌套里，永远把父盒子分成12份 ，不管父盒子有多大，只要是容器，都被划分成12份
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap 的样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
.one {
height: 50px;
background-color: pink;
line-height: 50px;
}
.two {
height: 50px;
background-color: blue;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- 要求：列嵌套，在这一列中，再放入两个子盒子，分别占父盒子的一半，记住：列嵌套，父盒子也是划分成12分 -->
<div class="col-md-6 one">
<!-- 此时我们会发现，子盒子靠左侧有很大的padding值，这个padding值一个是父盒子的，另一个是自身的，所以我们需要添加row来消除父盒子的padding值 -->
<!-- <div class="col-md-6">1</div>
<div class="col-md-6">2</div> -->
<div class="row">
<!-- 添加row之后，会消除父盒子padding值得影响，同时也让子盒子的高度默认等于是父盒子的高度 -->
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
</div>
</div>
<div class="col-md-6 two">2</div>
</div>
</div>
</body>
</html>
列偏移：offset
列偏移更容易理解，就好像我们推东西一样，现在是这样：
我想让它向右平移五份，那么只需要加 offset-5就可以
左侧
如图：
列排序
push 推 pull 拉
这个内容用的不多。
要求，左边的盒子推到右边，右边的盒子推到左边，代码演示：
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">左边</div>
<div class="col-md-4 col-md-pull-8">右边</div>
</div>
</div>
</body>
</html>
效果图：
重点：显示与隐藏
隐藏 hidden-屏幕代号 含义：在当前屏幕下隐藏 记住 没有向上或者向下兼容的特点
比如： hidden-xs 意思是在超小屏幕下隐藏，那么 在其他的屏幕下就会显示
显示 visible-屏幕代号 含义：在当前屏幕下显示 ，那么在其他屏幕宽度上就不显示 同隐藏一致
例：visible-md 意思是在中等屏幕下显示，那么在其他的屏幕下是隐藏的
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我会显示哦</span>
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
<div class="col-xs-3">4</div>
</div>
</div>
以上便是响应式全部内容
补充内容：
在bootstrap网站上，有很多可以我们直接拿过来就可以使用的样式,甚至是字体图标，只要复制类名，然后直接使用即可，下面的阿里百秀中会使用一些样式
响应式案例：阿里百秀
1.文件夹准备工作
2.引入bootstrap样式文件 新建index.css 并引入
<!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
3.布局分析
通过放大和缩小页面，我们会发现，在中等屏幕992px以上和大屏幕时，页面的布局时一样的，所以我们布局pc页面时，可以直接从col-md开始不需要再去书写col-lg 省去很多麻烦。
首先划分为三列 各占 2 ：7 ：3 分别叫做 左侧，中间和右侧
先说左侧排版布局：
左侧 上面一个图片，我们可以用a链接包裹起来，下面直接放一个无序列表即可
中间 排版，我们可以分为上下两个大的模块 其中上面的模块 用无序列表，给小li加浮动，给第一个小li 宽度设为50% 其他的小li宽度给25% 高度固定死
下面我们会发现依旧可以用bootstrap划分成 9:3的份数，然后开始排版。
右侧 我们与左侧一样，按照从上到下开始排版，特别注意 “热搜”这个地方，我们不需要再写样式，可以直接去bootstrap网站上找相似的样式，然后调用类名即可。
如此，我们在pc端的网页就做完了。
但是响应式，我们会关注，在屏幕缩小，进入到小屏幕，有哪些盒子会发生变化。
代码：
如图，当我们进入小屏幕的时候，导航栏和我们的logo会发生变化。所以我们应该把图片的宽度设置为max-width：100% 不让图片缩放
至于ul和小li的布局发生改变，我们可以通过媒体查询来改变，当屏幕进入小屏幕时，页面元素应该如何变化。
代码：
/* 当我们的屏幕进入平板小屏幕或者手机超小屏幕的时候，导航栏要求一排显示， 且宽度为20% */
@media screen and (max-width:991px) {
.header-nav {
margin-bottom: 10px;
}
.header-nav li {
float: left;
width: 20%;
}
}
小屏幕设计完成后，我们继续缩放，看在超小屏幕也就是手机端会有那些变化。
我们会发现，logo图片消失，取而代之的是文字 还有底部会有文字隐藏起来 此处我们可以通过visible和hidden来实现
还有中间部分的新闻模块，我们会发现第一个图片宽度变为100% 其他的变为50% 我们也可以通过媒体查询来实现
进入超小屏幕后的媒体查询代码：
/* 进入超小屏幕的时候 <768的时候,文字大小改成14px*/
@media screen and (max-width:767px) {
.header-nav li a {
font-size: 14px;
}
/* 当进入超小屏幕时，第一个li宽度100% 其他的li宽度为50% */
.news ul li {
width: 50%;
}
.news ul li:nth-child(1) {
width: 100%;
}
.publish-txt h3 {
font-size: 14px;
}
}
整体代码如下
html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>alibaixiu</title>
<!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container">
<div class="row">
<!-- //我们要分成三列 分别是 header article aside -->
<!-- 为什么直接写md而不写lg 因为lg下和md下展现的是一样的，所以我们只需要写md就可以了 -->
<!-- 左边 -->
<header class="col-md-2">
<div class="logo">
<a href="javascript:;">
<img src="./images/logo.png" alt="" class="hidden-xs">
<span class="visible-xs logo-titlt">阿里百秀</span>
</a>
</div>
<ul class="header-nav clearfix">
<li><a href="javascript:;" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="javascript:;" class="glyphicon glyphicon-picture">自然汇</a></li>
<li><a href="javascript:;" class="glyphicon glyphicon-phone">科技潮</a></li>
<li><a href="javascript:;" class="glyphicon glyphicon-queen">奇趣事</a></li>
<li><a href="javascript:;" class="glyphicon glyphicon-education">美食杰</a></li>
</ul>
</header>
<!-- 中间 -->
<article class="col-md-7">
<!-- 新闻模块 -->
<div class="news clearfix">
<ul>
<li><a href="javascript:;">
<img src="./uploads/lg.png" alt="">
<p>阿里百秀</p>
</a></li>
<li><a href="javascript:;">
<img src="./uploads/1.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a></li>
<li><a href="javascript:;">
<img src="./uploads/2.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a></li>
<li><a href="javascript:;">
<img src="./uploads/3.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a></li>
<li><a href="javascript:;">
<img src="./uploads/4.jpg" alt="">
<p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
</a></li>
</ul>
</div>
<!-- 发表模块 -->
<div class="publish">
<div class="row">
<div class="publish-txt col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
/ 营养 / 趣味生活</span> </p>
</div>
<div class="publish-img col-sm-3 hidden-xs">
<a href="#">
<img src="./uploads/3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="publish-txt col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
/ 营养 / 趣味生活</span> </p>
</div>
<div class="publish-img col-sm-3 hidden-xs">
<a href="#">
<img src="./uploads/3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="publish-txt col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
/ 营养 / 趣味生活</span> </p>
</div>
<div class="publish-img col-sm-3 hidden-xs">
<a href="#">
<img src="./uploads/3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="publish-txt col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
/ 营养 / 趣味生活</span> </p>
</div>
<div class="publish-img col-sm-3 hidden-xs">
<a href="#">
<img src="./uploads/3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="publish-txt col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
<p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
<p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤
/ 营养 / 趣味生活</span> </p>
</div>
<div class="publish-img col-sm-3 hidden-xs">
<a href="#">
<img src="./uploads/3.jpg" alt="">
</a>
</div>
</div>
</div>
</article>
<!-- 右侧 -->
<aside class="col-md-3">
<a href="javascript:;">
<img src="./uploads/zgboke.jpg" alt="">
</a>
<a href="javascript:;" class="hot">
<span class="btn btn-primary hot-bt">热搜</span>
<h4 class="text-primary">欢迎加入中国博客联盟</h4>
<p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
</a>
</aside>
</div>
</div>
</body>
</html>
css样式代码
@media screen and (min-width : 1280px) {
.container {
width: 1280px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a:hover {
text-decoration: none;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
border: none;
}
body {
background-color: #f5f5f5;
}
.container {
background-color: #fff;
}
/* header模块 */
/* 因为列自带有左右的padding值，我们需要修改，因为我们不需要啊，所以设置为0 */
header {
padding-left: 0 !important;
}
/* logo模块 */
.logo {
background-color: #429ad9;
}
.logo img {
/* width: 100%; */
display: block;
margin: 0 auto;
max-width: 100%;
}
.logo-titlt {
height: 50px;
text-align: center;
line-height: 50px;
font-size: 18px;
color: #fff;
}
/* 导航栏模块 */
.header-nav {
background-color: #eee;
border-bottom: 1px solid #ccc;
margin-bottom: 0;
}
.header-nav li a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 30px;
color: #666;
font-size: 16px;
}
.header-nav li a::before {
vertical-align: -2px;
margin-right: 5px;
}
.header-nav li a:hover {
color: #333;
background-color: #fff;
text-decoration: none;
}
/* 当我们的屏幕进入平板小屏幕或者手机超小屏幕的时候，导航栏要求一排显示， 且宽度为20% */
@media screen and (max-width:991px) {
.header-nav {
margin-bottom: 10px;
}
.header-nav li {
float: left;
width: 20%;
}
}
/* 进入超小屏幕的时候 <768的时候,文字大小改成14px*/
@media screen and (max-width:767px) {
.header-nav li a {
font-size: 14px;
}
/* 当进入超小屏幕时，第一个li宽度100% 其他的li宽度为50% */
.news ul li {
width: 50%;
}
.news ul li:nth-child(1) {
width: 100%;
}
.publish-txt h3 {
font-size: 14px;
}
}
/* article模块 */
/* 新闻模块 */
.news {
border-bottom: 1px solid #ccc;
}
.news li {
float: left;
height: 128px;
width: 25%;
padding-right: 10px;
margin-bottom: 10px;
}
.news li:nth-child(1) {
width: 50%;
height: 266px;
}
.news li a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.news li a img {
width: 100%;
height: 100%;
}
.news li a p {
position: absolute;
bottom: 0;
left: 0;
height: 41px;
width: 100%;
margin: 0;
color: #fff;
font-size: 12px;
background-color: rgba(0, 0, 0, .5);
padding: 5px 10px;
}
.news li:nth-child(1) p {
font-size: 20px;
line-height: 41px;
padding: 0 10px;
}
/* 发表模块 */
.publish .row {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.publish-img a {
display: block;
width: 100%;
height: 100%;
}
.publish-img a img {
width: 100%;
height: 100%;
}
/* 右侧aside */
aside a {
display: block;
width: 100%;
margin-bottom: 20px;
}
aside a img {
width: 100%;
}
.hot {
display: block;
padding: 0 20px 20px;
border: 1px solid #ccc;
}
.hot .hot-bt {
outline: none;
border-radius: 0;
margin-bottom: 20px;
}
.hot p {
font-size: 12px;
}
.hot p:hover {
color: #23527c;
}
以上就是本次响应式布局总结，感谢阅读。
编程的道路上，不只有疲惫，还有快乐和花朵。
我们都很努力，我们也都能成功
本文转载自: https://blog.csdn.net/LOxia/article/details/123803838
版权归原作者 黑马小羊卷 所有， 如有侵权，请联系我们删除。
版权归原作者 黑马小羊卷 所有， 如有侵权，请联系我们删除。