一、什么是响应式布局？
响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。
二、响应式设计步骤
2.1、viewport 设置
大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度。
在head中添加meta标签，设置设备的宽度作为视图大小，禁止缩放。代码如下：
代码语言：javascript复制<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>2.2、媒体查询
媒体查询：Media Queries，是响应式布局的核心，浏览器会根据条件选择需要渲染的html和css内容。多种屏幕设备的宽度主要分为四个区间。
超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面显示器 (≥992px) | 大屏幕大桌面显示器 (≥1200px) |
|---|
媒体查询有两种引入方式：内部引入和外部引入。
2.2.1、内部引入
代码语言：javascript复制/* 手机端样式 */
@media screen and (max-width:768){}
/* ipad终端样式 */
@media screen and (min-width:768px) and ( max-width:992px ){}
/*笔记本样式*/
@media screen and (min-width:992px) and (max-width:1200px){}
/* 台式机大屏 */
@media screen and (min-width:1200px){}2.2.2、外部引入
代码语言：javascript复制/* 手机端样式 */
<link rel="stylesheet" media="screen and (max-width:768px)" />
/* ipad终端样式 */
<link rel="stylesheet" media="screen and (min-width:768px) and ( max-width:992px )" />
/*笔记本样式*/
<link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" />
/* 台式机大屏 */
<link rel="stylesheet" media="screen and (min-width:1200px)" />注意：
- 使用媒体查询的时候，要把公共样式放到最前边，媒体查询代码放到最后。
- 写媒体查询的时候要按照屏幕从小到大的设置。
- 外层包裹的元素宽度处理要使用百分比。
- 图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。
三、响应式布局实例
eg：制作一个展示图片的列表，大屏展示一行4张图片，ipad一行展示3张图片，手机一行展示两张图片。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.list{
width:100%;
max-width:1200px;
padding:0;
margin:0 auto;
}
.pic{
float:left;
list-style:none;
box-sizing: border-box;
padding:10px;
margin:15px 0px;
}
.picture{
width:100%;
height:100px;
background:#eaeaea;
}
@media screen and (max-width:768px) {
.pic{
width:50%;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
.pic{
width:33%;
}
}
@media screen and (min-width:992px) {
.pic{
width:25%;
}
}
</style>
</head>
<body>
<ul class="list">
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
</ul>
</body>
</html>运行以后不断改变浏览器的宽度，图片元素布局会自动改变。
bootstrap框架用的就是媒体查询原理，我们做响应式布局的时候，基本都会借用bootstrap框架提高工作效率。
四、响应式优缺点
4.1、优点：
- 面对不同分辨率设备灵活性强。
- 能够快捷解决多设备显示的适应问题。
4.2、缺点：
- 响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。响应式布局使用移动端窄屏时，隐藏内容依然会加载，低分辨率加载高质量图片或视频，不同屏幕尺寸都提供相同的网页，加载内容多，浪费流量，速度慢，容易造成用户流失。
- 兼容所有终端，工作量大，效率低下。
- 仅适用布局、信息、框架并不复杂的部门类型网站。
- 响应式对于 低版本IE浏览器简直是悲剧。响应式里运用了很多html5新特性，而这些特性只要高级浏览器才支持，所以在IE6、7、8几乎是看不了的。
- 响应式设计不利于百度关键词优化和排名。用户在不同终端搜索习惯不同，百度对移动端和PC端的关键词处理策略也不同，百度搜索排名也是有PC和移动端之分的，所以如果要做优化，不建议响应式布局。
建议你的网站最好分别制作移动端和PC端，这样网站性能、用户体验、用户留存相对来说会好很多。大公司它们的网站都是独立的，很少使用响应式布局。
