响应式布局

响应式布局简介

响应式布局是2010年提出的一个概念，就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网的。

响应式布局的优点

一、面对不同分辨率设备灵活性强–也就是说响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

二、能够快捷解决多设备显示适应问题–对不同终端有舒适的界面这个问题响应式布局解决的很好。

响应式布局的缺点

兼容各种设备工作量大，效率低下。

代码累赘，会出现隐藏无用的元素，加载时间加长。（特别是导航栏，在屏幕宽度小的时候，既要给用户提供方便快捷的菜单供选择，也要让用户有足够的空间点击，这时就需要隐藏菜单。–这是很多响应式布局的设计选择）

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。（因为要适应不同屏幕宽度的终端，也为了让用户更好的体验，在不同的终端会有略微的不同，如果用户同时在不同终端看同一个网站，–结果当然不得而知，这样可能会降低用户对网站的喜爱程度）

设计思路

Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。

media query能够获取哪些值?

设备的宽和高device-width，device-height显示屏幕/触觉设备。

渲染窗口的宽和高width，height显示屏幕/触觉设备。

设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。

画面比例aspect-ratio点阵打印机等。

设备比例device-aspect-ratio-点阵打印机等。

对象颜色或颜色列表color，color-index显示屏幕。

设备的分辨率resolution。

通过Media Queries实现响应式布局设计

/* 当浏览器的可视区域小于980px */

@media screen and (max-width: 980px) {
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}

/* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}

通过上面我们就可以监测浏览器的可视区域变化的时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值:

/* 设置HTML5元素为块 */

article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section {
display: block;
}
/* 设置图片视频等自适应调整 */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

如果是大型的网站或项目，我们讲为各类型的移动终端独立编写css样式文件，此时的使用方式：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)"

href=”small_screen480.css”>small_screen480.css即为对480px大小移动终端书写的css文件/**

css文件被区分引用，接下来的工作就是我们非常熟识的弹性布局了，另外再注意俩点，一是图片，在移动设备上，要做一些特定适合的小图片来匹配，如果单纯使用压缩的图片会失真，影响用户体验;二是在头部加入如下代码，目的是声明在移动设备上设置原始大小显示和是否缩放：

<meta name="viewport" content="width=device-width; initial-scale=1.0 user-scalable=no″>

最后说下IE浏览器，因为他不支持media Queries的，使用时需要引用一个Media Query Javascript解决，如下:

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->