什么是响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的设计师采用这个技术。

一个典型的响应式布局网站：http://www.16ketang.com/ 试着逐渐缩小该页面的窗口，看看网页有什么变化

如何实现响应式布局

由于响应式布局要针对不同的视口尺寸，对样式作出更多的修改，因此并不像流式布局那样让宽度自动适应那么简单。

实现响应式布局最核心的技术就是使用媒体查询（media selector）。

媒体查询是CSS3引入的概念，是指针对不同的设备、不同的视口尺寸，使用不同的样式代码。媒体查询的书写格式如下：

下面是一个简单的媒体查询的例子：

上面的代码应该这样阅读：

有一个样式规则 .item
如果当前的视口尺寸大于等于1200px，则再加入一个样式规则 .item
如果当前的视口尺寸大于等于992px，并且小于1200px，则再加入一个样式规则 .item

可以想象，如果视口的尺寸当前是1500px，则页面中会存在两个类样式 .item ，一个想将背景设置为红色，一个想将背景设置为蓝色，当然，此时就会进入层叠的规则解决冲突，那就是CSS的基础知识了。这里主要是要说明，媒体查询中的样式规则，会根据视口大小来决定要不要启用这些规

则。

响应式布局的原理，正是大量的使用媒体查询，让页面中一些元素在不同的视口中具有不同的样式表现。

常见的视口尺寸

虽然你现在知道了如何使用媒体查询，但我们真正关心的，是页面在手机、平板、上网本或小型笔记本、PC端中具有更好的表现力。

但问题是手机型号众多，其他设备也是如此，它们的尺寸不尽相同，我们如何来判定当前的视口尺寸属于什么设备呢？

好在经过大量的实践应用，开发者已经总结了一套普遍的适用规则，按照这套规则，你就可以将视口尺寸和具体设备对应起来。

视口尺寸和设备关系表

视口	设备
≥1200px	大屏幕：投影仪电视 PC端
≥992px && <1200px	中等屏幕：上网本、小型笔记本

≥768px && <992px	小屏幕：平板
<768px	超小屏幕：手机

根据上述的关系表，再结合你网站的实际情况，就可以很容易的得出你需要编写的媒体查询代码。比如，我的网站只考虑两种情况：

手机端显示一种风格
其他设备共享一种风格

那么对某个需要响应式布局的元素，我的CSS代码应该类似下面的格式：

在Sass中使用媒体查询

开发一个实际的项目时，我们通常会选择一些预编译器来处理我们编写的CSS源代码，比如

SASS。很多预编译器都对媒体查询有很好的支持。

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

下面以一个例子，说明在SASS中是如何使用媒体查询的：

编译为：