原文地址：http://www.alistapart.com/articles/css-floats-101/

堂主译文地址：http://www.osmn00.com/translation/232.html

转载请原作者及译者劳动，附带以上信息，谢谢合作~

翻译此文的目的一是回顾并梳理基础知识；二是为初学者提供一份学习文档，遥记得06年下半年刚接触CSS的时候，正经的一篇汉语版基础技术文章都很难找到，更别说书了；三是浮动的相关知识也是后续自己酝酿的一篇博文将会涉及到的知识点，所以翻译此文也是为了避免届时的新博文出现无引用文章的尴尬。

原文地址：http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

堂主译文地址：http://www.osmn00.com/translation/224.html

转载请尊重原作者及译者劳动，附带以上信息，谢谢合作~

印象里此文之前有人翻译过，但堂主也是在翻译完之后才得知的，所以此文之后在我的电脑里“躺”了5个月之久。直到今天翻移动硬盘寻找资料才发现还有这么个文章，想想毕竟是自己的劳动，同时也算是一个学习的笔记，于是发了出来。

----------------------------------- 分割线，以下是正文 ---------------------------------

CSS3给网页设计和开发人员带来的感受一直是痛并快乐着。一方面我们为CSS3所能解决的问题和展示的远景感到欣喜，另一方面却又为IE8对其支持的匮乏而惆怅。我们这篇文章里要谈论的就是IE8尚未支持的一部分CSS3技术。但是这并没什么太大关系，因为这个组件最有价值的应用环境——小型的如iPhone和Android设备等——已经可以很好的支持它了。

在这篇文章里我将说明如何使用一点点CSS3代码就能为你创建一个适应于iPhone浏览的网站版本。我们将看一个非常简单的例子，同时我也会讲述向我们自己的网站中添加一个适合移动小型设备浏览的样式表的过程来展示创造一个适合手机浏览的网站是多么的简单。

Media Queries

如果你曾经为一个网站创建过应用于打印设备的样式表，那么你不会对为特殊情况创建样式表的思路感到陌生。在CSS2中通过media types来应用这个功能。Media Types使你能够根据媒体的种类来应用样式，比如打印机和手持设备等。不幸的是，设备们从来都没对media types提供过什么好的支持，我们基本上看不到它有过什么应用。

CSS3继承并发扬了 Media Queries。不同于以往对设备型号的判断，这回它们将着眼点放在了设备自身的能力上，你可以使用它们来检查所有的事情，例如：

• 浏览器的宽和高
• 设备的宽和高
• 屏幕是横款还是竖款的
• 分辨率

如果用户拥有一款支持media queries的浏览器，那么我们就可以为某些特定的条件书写特别的CSS。比如，我们可以靠某些特征描述检测到用户使用的是智能手机，这样我们就可以为这种情况下的浏览提供一个特别的样式布局。来看一个例子，英国WEB开发者会议（UK web conference）dConstruct 刚刚推出了2010年集会的专题网站，其中便使用了media queries技术。