在第一篇文章中，分享了如何组织一个成功的回顾总结会议。那么在此文章中，主要讨论我们工作中所用到的技术以及如何组织媒体查询。通过实战来介绍在项目中使用块媒体查询好还是在选择器中插入媒体查询方便。

随着移动设备以及用户终端种类的不断增加，响应式设计在Web是运用越来越广泛。而响应式设计中媒体查询又起着举足轻重的作用，可以说离开了媒体查询，响应式设计就没有了他的灵魂。换句话说，响应式设计做的优秀不优秀，看媒体查询的使用就能知道。到目前为止，智能移动设备的普及化，我们的响应式设计应该考虑移动先行。那么移动先行如何实现呢？媒体查询又对其有什么使用呢？欲想了解，烦请阅读根据Brad Frost的《7 Habits of Highly Effective Media Queries》译文，让你把媒体查询运用的更灵活。

Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？

Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段，以供大家参考。

CSS3 Media Queries是一个强大的媒体查询功能，他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现，Media Queries的功能是越来越得到前端人员的亲眯。

我也不另外，跟着这股时尚流行风，从接触到学习，紧接的到应用，对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries，W3cplus通过互联网的搜集整理了一份CSS3 Media Queries模板。随着移动端上的应用越来越多，特别是苹果公司的系列产品型号的增加，给前端人员对Media Queries的运用带些许的麻烦。为了解决这个麻烦，在互联网上搜集了相关的资料，专门针对苹果的iPads和iPhones的Media Queries模板，希望这些模板能帮助大家减少在网上查找的时间。

随着Responsive设计的流行，Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择，让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过，如果你还没有接触，不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法，就是利用@media来做一些IE下的特殊效果。

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了，但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目，为了实现iPhone和iPad横板与竖板的风格，让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用，虽然帮我解决了iPad的横板与竖板的风格渲染问题，但在iPhone4上还是存在问题的。后来结过网上的查找，总算是问题解决了，下面就来看看问题是如何解决的。

在具体开始之前，先来看看他的源码：

最早在《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网站在不同屏幕下的显示风格，如下图所示：