- A+
所属分类：Web前端
1 响应式
什么是响应式布局
响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
为什么要有响应式布局？
- 在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。
- 通常的做法是针对移动端单独做一套特定的版本。
- 如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）
- 响应式布局 ：一个网站能够兼容多个终端（节约开发成本）
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
响应式开发现状：
- 如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）
- 在新建站点 上采用响应式开发的越来越多。
- 在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。
响应式开发与移动web开发的比较
| 开发方式 | 移动web开发+pc开发 | 响应式开发 |
|---|---|---|
| 引用场景 | 一般已经有了PC端网站，只需要端独开发移动端网站即可 | 针对一些新建网站，并且要求适配移动端 |
| 开发 | 针对性强，开发效率高 | 兼容各种终端，效率低 |
| 适配 | 只能适配移动端或者PC端，pad上体验比较差 | 可以适配各种终端 |
| 效率 | 代码简洁，加载快 | 代码相对复杂，加载慢 |
2 媒体查询
媒体查询（Media Query）是CSS提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。
设备分类
| 分类 | 宽度范围 |
|---|---|
| 大屏设备 | >1200px |
| 中屏设备 | 992px~1200px |
| 小屏设备 | 768px~992px |
| 超小屏设备 | < 768px |
媒体查询的使用
需求：
<!-- 需求： 大屏设备(>1200px) 版心：1170px 背景色：红色 中屏设备(992-1200) 版心：970px 背景色：蓝色 小屏设备(768-992) 版心：750px 背景色：黄色 超小屏设备(<768px) 版心：100% 背景色：绿色 --> 响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。
媒体查询语法：
/*查询屏幕*/ @media screen and 条件 { } /*条件的写法*/ /*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/ /*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/ @media screen and (min-width: 1200px) { .container { width: 1170px; background-color: red; } } @media screen and (min-width: 992px) and (max-width: 1200px) { .container { width: 970px; background-color: blue; } } @media screen and (min-width: 768px) and (max-width: 992px) { .container { width: 750px; background-color: yellow; } } @media screen and (max-width: 768px) { .container { width: 100%; background-color: green; } } 弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。
3 原生响应式的实现
第一步：通过媒体查询实现响应式的版心
第二步：再调整版心内的细节样式
【原生响应式实现demo】
html
<!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"> <title>原生响应式</title> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 头部 导航 --> <div class="container"> <div class="header"> <ul class="left pull-left hide-xs"> <li>导航</li> <li>导航</li> <li>导航</li> <li>导航</li> <li>导航</li> <li>导航</li> </ul> <ul class="right pull-right hide-xs"> <li class="hide-sm">导航</li> <li class="hide-sm">导航</li> <li>导航</li> </ul> <span class="btn">三</span> </div> </div> <!-- 原生响应式 实现栅格布局-媒体查询 + 浮动+ 百分百 --> <div class="container product"> <div class="column"> <div class="in"></div> </div> <div class="column"> <div class="in"></div> </div> <div class="column"> <div class="in"></div> </div> <div class="column"> <div class="in"></div> </div> <div class="column"> <div class="in"></div> </div> <div class="column"> <div class="in"></div> </div> </div> <script> document.querySelector('.btn').onclick= function () { document.querySelector('.left').classList.toggle('hide-xs'); }; </script> </body> </html> less
* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } // 版心 .container { width: 1200px; margin:0 auto; } .pull-left { float: left; } .pull-right { float: right; } .clearfix{ overflow: hidden; } .header { position: relative; height: 70px; padding: 10px; background-color: #ccc; ul { li { float: left; height: 50px; width: 80px; background-color:green; color: #fff; text-align: center; line-height: 50px; margin: 0 10px; } } .btn { position: absolute; right: 10px; top: 10px; border-radius: 5px; width: 80px; height: 50px; background-color: yellow; color: red; text-align: center; line-height: 50px; font-size: 40px; display: none; } } .product { .column{ float: left; width: 33.33%; height: 150px; // border: 1px solid #000; padding: 10px; .in { background-color: #f99; height:100%; } } } // 关键是 有一套响应式的版心 @media screen and (min-width: 1200px) { .container { width: 1170px; } } @media screen and (min-width: 992px) and (max-width: 1200px) { .container { width: 970px; } } @media screen and (min-width: 768px) and (max-width: 992px) { .container { width: 750px; } .hide-sm { display: none; } .product { .column{ width: 50%; } } } @media screen and (max-width: 768px) { .container { width: 100%; } .hide-xs { display: none; } // 设置导航样式 .header { ul { margin-top: 60px; width:100%; li { width: 100%; margin: 0; margin-bottom: 5px; } } .btn { display: block; } } .product { .column{ width: 100%; } } } 
