最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起，前面跟大家一起学习了：

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象（有的地方称作为“信息状态块”）的制作。那么今天老话重谈，主要使用不同的几种结构来制作这个媒体对象效果：

我们把上图拆分细化一下，可以划成下图的样子：

根据上图我们就可以轻松的写出需要的HTML结构。

HTML Markup:

Responsive这个词，这段时间公司老是在提，致使我大量的查找相关方面的资料学习。总算是能做出小小的东西出来，也让自己有点满足感。今天我想和大家一起来学习web designer wall的《Responsive Design with CSS3 Media Queries》教程。从这篇教程中，我们可以学会如休何使用CSS3的Media Queries属性来实现Responsive设计。

今天继续讲有关于CSS3 Media Queries案例，前面介绍的《CSS3 Media Queries案例——Hicksdesign和《CSS3 Media Queries案例——A List Apart》都是有关于页面的应用，而今天的我要说的案例Tee Gallery是涉及产品列表布局的应用。换句话说就是让产品列表页面如何应用流体布局结合CSS3的Media Queries，制作出在不同媒体条件和媒体介质下的页面风格。别的先不说，和大家一起目睹一下Tee Gallery网站在不同屏幕下的显示风格，如下图所示：

有关于CSS3 Media Queries的介绍，现在在网络上铺天盖地了，在《CSS3 Media Queries》中主要介绍了一些关于CSS3 Media Queries的理论知识，而在《CSS3 Media Queries案例——Hicksdesign》中介绍关于CSS3 Media Queries应用的第一个案例，今天和大家一起来看有关于CSS3 Media Queries实战中的第二个实例A List Apart网站。看看这个网站是如何应用CSS3 Media Queries的。

前面在《CSS3 Media Queries》介绍了一些CSS3的Media Query的理论知识，今天开始主要针对CSS3 Media Query进行一些实际案例的分析，从实际案例中来进一步学习和运用CSS3的Media Query，从而好让大家在自己的项目中更好的应用Media Query。

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式：