Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。
@media screen and (max- 600px) { .class { background: #ccc; } }
如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。
<link rel="stylesheet" media="screen and (max- 600px)" href="small.css" />
Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
@media screen and (min- 900px) { .class { background: #666; } }
Multiple Media Queries
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
@media screen and (min- 600px) and (max- 900px) { .class { background: #333; } }
Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）
@media screen and (max-device- 480px) { .class { background: #000; } }
Bootstrap完全支持响应式设计，在默认情况下Bootstrap是没有引入响应式特性的，因为不是任何情况都需要使用到，建议在需要使用的时候才启用它。
1.响应式Bootstrap概述
响应式Bootstrap通过Media Query技术实现，相关的响应式CSS样式存放在bootstrap-responsive.css文件中，Media Query允许在一些条件基础上自定义CSS，不过主要是通过min-width和max-width进行设计。主要包含的定义项目：
修改栅格系统中列的宽度。
根据需要，用堆叠元素代替浮动。
调整标题和文本的大小以适合各种设备。
当然，Media Query技术不是万能的，对于大型商业项目，建议选用JavaScript技术来解决响应式设计，可以考虑使用专门的代码库，而不是构筑在Media Query技术之上。
Bootstrap支持的几个Media Query都放在bootstrap-responsive.css文件中，调用该文件可以使页面能够灵活适应不同设备和屏幕分辨率，简单说明如表3-1所示。
Bootstrap支持的Media Query分类
| 类 型 | 布局 | 宽度 | 列宽 | 间隙 | 宽度 |
| 大屏幕 | 大于或等于 | 1200px | 70px | 30px | |
| 默认 | 大于或等于 | 980px | 60px | 20px | |
| 平板电脑 | 大于或等于 | 768px | 42px | 20px | |
| 手机到平板电脑 | 小于或等于 | 768px | 流式列 | 无固定宽度 | |
| 手机 | 小于或等于 | 480px | 流式列 | 无固定宽度 |
响应式Bootstrap
使用响应式Bootstrap的具体方法和步骤如下。
第1步：在需要使用响应式设计的页面中启用响应式特性，具体方法如下。
在文档头部区域内添加合适的meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
引入Bootstrap响应式样式表，即可启用响应式CSS。
<link href="bootstrap/css/bootstrap-responsive.css"rel="stylesheet" "type="text/css">
提示 如果已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。
响应式布局辅助类样式
| 类（Class） | 手机（768px 及以下） | 平板电脑 （979px 到 768px） | 台式机 （默认） |
| .visible-phone | 显示 | 隐藏 | 隐藏 |
| .visible-tablet | 隐藏 | 显示 | 隐藏 |
| .visible-desktop | 隐藏 | 隐藏 | 显示 |
| .hidden-phone | 隐藏 | 显示 | 显示 |
| .hidden-tablet | 显示 | 隐藏 | 显示 |
| .hidden-desktop | 显示 | 显示 | 隐藏 |
提示 这些类样式不支持table元素，在有限的情况下使用Bootstrap响应式设计类样式，避免创建同一个站点的不同版本。当这些类样式能对每种设备的展示做有益的补充时才使用。