CSS媒体查询（CSS Media Queries）是CSS基本特性之一。它的作用就是让我们在相同的HTML基础上可以以不同的CSS实现适配各种终端的UI效果（比如，桌面端、iPad、双屏幕、折叠设备和移动手机等）。也就是说，我们可以为它们（不同的终端设备）使用相同的HTML，而不是为智能手机维护一个网站，为笔记本电脑、台式机维护另一个网站。但是它们是如何工作的，有哪些是你应该使用的呢？这就是我们接下来要和大家一起探讨的。

从文章标题中不难发现这篇文章要和大家聊的是两个东东，即响应式和网格。从布局系统来说，响应式布局和网格布局都不是什么新东西了。但是他们结合在一起，可以让响应式布局变得更灵活。正如@Keir Watson所说，只要20行代码就可以实现响应式网格布局。不过，我们今天来看两个比较有意思的布局，看上去并不是很容易实现的布局效果。

在探索A11Y和H5 Dark Mode的时候，我们发现使用CSS的一些属性可以识别出用户的偏好设置，比如prefers-reduced-motion来识别设备是否开启了Reduce Motion功能，用prefers-color-scheme来识别设备是否开启了Dark Mode模式。而这些都是CSS新的媒体特性，即 Media Queries Level 5规范中介绍的特性，该规范除了这两个新特之外，还有其他的新特性，接下来，我们来一起看看CSS媒体查询新增了哪些特性。

虽然标题说不用Media Queries，但我还是要在开头讲清楚，本文并不是要大家丢掉Media Queries，也不是要抨击Media Queries。Media Queries实际上非常有用，我在各种地方都会用到。但Media Queries并不能解决所有的自适应的设计问题。常常有一种需求是根据元素所在的组件本身的大小来决定元素的排列，而不是整个视窗的宽高。要解决这类问题，Element Queries的概念诞生了。然而，Element Queries只停留在概念上，Mat Marquis 也针对这个概念提出了一些问题，并且称之为container queries。不过可惜这些都只停留在概念上。也许未来有一天，这些概念会成为现实，不过与此同时，我也来分享一些小技巧，你现在就可以用来处理某一类的问题。

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

随着移动设备以及用户终端种类的不断增加，响应式设计在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上还是存在问题的。后来结过网上的查找，总算是问题解决了，下面就来看看问题是如何解决的。

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