前端响应式布局为什么是个坑？
一、什么是响应式布局？
响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。
二、响应式设计步骤
2.1、viewport 设置
大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度。
在head中添加meta标签，设置设备的宽度作为视图大小，禁止缩放。代码如下：
<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内容。多种屏幕设备的宽度主要分为四个区间。
|
超小屏幕 |
小屏幕 |
中等屏幕 |
大屏幕 |
媒体查询有两种引入方式：内部引入和外部引入。
2.2.1、内部引入
/* 手机端样式 */
@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、外部引入
/* 手机端样式 */
<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端，这样网站性能、用户体验、用户留存相对来说会好很多。大公司它们的网站都是独立的，很少使用响应式布局。
