原文地址：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技术。

在PC机的桌面浏览器中访问的效果：

在iPhone中浏览：

从上面的截图可以看出这个网站并不是简单的将网站缩小来应付手机浏览，而是竟然将内容重新设计以便更适合小屏幕的手机浏览器来浏览。有些人可能会认为这仅仅是针对iPhone进行的一个布局，但其实在以Android为操作系统的手机上的Opera Mini 浏览器中，它们的显示是完全一致的。这个使用了media queries技术针对设备不同的支持能力开发的站点可以适合任何设备的访问——即使这些设备是网站开发人员所未考虑过的。

使用Media Queries为手机创建单独的样式表

我们从一个非常简单的例子开始，下面是一个简单的两栏布局：

为了使iPhone用户更容易阅读，我打算将两栏变成一栏，并把顶部的图片缩小以免用户没看到内容之前还得向下滚动一阵子屏幕。

首先要书写的media queries代码是下面这个用来识别小型设备的，

@media only screen and (max-device-width: 480px) {  

} 

下面我们在上面的大括号里书写针对小型设备的CSS，在这个层级中书写的代码会覆盖掉相应的专为大分辨率浏览器书写的那部分。下面我们来把两栏变为一栏再缩小那个图片：

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

	#content {
		float: none;
		width: 100%;
	}

	#navigation {
		float:none;
		width: auto;
	}
}

相应的图：

为这部分代码添加单独的外链

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

测试media queries

如果你手机里的浏览器支持media queries，那你可以自己测试你的代码，不过前提得是你要将你的代码传到线上的服务器。那么要是你的设备不支持media queries或者想要测试本机的代码该怎么办呢？

ProtoFluid便是这样一个可以帮到你的好好网站。这个程序容许你填写一个网址——甚至是本地的地址——并根据你选择的参数来模拟手机上是如何显示你的页面的。下面这个就是在ProtoFluid上模拟iPhone来浏览dConstruct的情况：

如果你有一个特殊尺寸的设备并且了解它的确定尺寸值，你也可以自定义窗体的数值来检测。

使用ProtoFluid我们需要对先前的语句做一下小的修改：设置一下“max-width”和“max-device-width”属性值。这样当你正常的桌面浏览器的窗口小于我们设置的宽度值时，media query也一样会起作用。

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}

更新完上面的代码后，刷新你的浏览器并把窗口调整小，当窗口宽度小于你设置的值时，会触发media query，于是它起作用了，你会看到页面布局起了变化以适应480像素下的浏览需求。

你现在应该准备好去使用ProtoFluid了，ProtoFluid每秒之处在于你还可以使用像Firebug一样的工具去随时调整你的布局，这是你在Iphone上做不到的。显然你应该在尽可能的多的设备上检测你的布局，ProtoFluid使得开发和布局都变得非常简单。

如果你不想用户在改变桌面浏览器宽度时候触发media query使得页面布局发生变动，而只像这种布局不同仅仅出现在手持设备上，你可以把“max-width”部分去掉。

改造现有的网站

我保留了上面的那个简单的案例来演示这项技术。这项技术对于改造既有的网站的是很容易使用的。使用CSS进行布局的一大卖点便是可以为我们的设计在不同设备上提供替换方案。作为实验我决定在我自己的一个商业网站项目上应用这项技术进行布局。

这是我的网站在正常的桌面浏览器中的效果。

添加新的样式表：

我们面对的将是一系列样式的更改，因为我们要在手持设备上沿着垂直方向布局，所以我要书写一个新的样式表放在目前的（针对正常的桌面浏览器）样式表之后，并在屏幕尺寸小于480像素的时候通过media queries来加载它。

<link rel="stylesheet" type="text/css" 
media="only screen and (max-width: 480px), 
only screen and (max-device-width: 480px)" 
href="/assets/css/small-device.css" /> 

为了创建我需要的样式表我选择了默认的样式表并把它另存为“small-device.css”文件。这样我只需要修改我要修改的部分，届时浏览器就会自动覆盖原有定义，而剩下的为改动的部分就可以直接从样式表里删除掉。

收缩顶部

首先要做的就是更换顶部LOGO图片以便在小屏幕的移动设备上显得更美观，我通过修改背景的方式而不是在结构里放入一张图片（原因大家自然都知道）。另外我还给顶部加了一个小背景。

body {
  background-image: url(/img/small-bg.png);
}

#wrapper {
  width: auto;
  margin: auto;
  text-align: left;
  background-image: url(/img/small-logo.png);
  background-position: left 5px;
  background-repeat: no-repeat;
  min-height: 400px; 
}

线性化布局

下一步是线性化布局，以便整个页面呈现单栏布局形态，这就要移除之前两栏布局时候的浮动和重新设置宽度值：

.article #aside {
  float: none;
  width: auto;  
}

整理

之后要做的就是在ProtoFluid里测试布局，这期间可能会要调整盒子的填充和边距等。在ProtoFluid里应用Firebug会使得工作变得轻松很多，我的大部分工作都是在Firebug环境中完成，当布局呈现出我想要的效果时，我就复制Firebug里的CSS到我网站的样式文件里去。

用在ProtoFluid测试网站。

在Iphone里测试

创建好我的样式表并且上传到空间后，我像在真正的手持设备中对它进行检测。在Iphone里我发现我那给力的单栏网页要比我预期中的显现差距蛮大。一顿搜索后我在“Safari开发者网站”中找到了答案——在网站head中添加一个meta元素设置width和device width相等。

<meta name="viewport" content="width=device-width" /> 

现在一切都太平了

我们这里只是通过一个简单的改造来展示如何为你的网站添加一个支持移动设备的版本。如果我要从头开始创建一个网站的话，我肯定会使用Media Queries技术，而且有那么多的可选方法来使得这个过程变得简单。比如采用单栏布局，尽可能的使用背景图片以便可以通过CSS来替换它们，再比如使用fluid images。

堂主注：作者的这个网站的地址是：http://www.edgeofmyseat.com/

更多资源

虽然这是一项很新的技术，但针对这个主题现在已经有很多非常好教程可供学习了：

• A List Apart – Responsive Web Design
• Apple – Safari Web Content Guide
• Sitepoint CSS Reference – Media Queries
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries
• Aral Balkan: How to make your web content look stunning on the iPhone 4′s new Retina Display
• Stuff and Nonsense: Proportional leading with CSS3 Media Queries
• Matthew James Taylor: iPad layout with landscape and portrait modes

向前兼容

这篇文章是在默认移动设备的浏览器是支持media queries的。如果你平常只是在Iphone或者Opera mini下浏览网站，那你大可不必担心支持性的问题。但如果你像在桌面浏览器中应用这一技术，现在也有很多方法可供你学习使用——可以通过添加JavaScript来使IE8和更低版本的IE浏览器和火狐3.5之前的版本支持这项技术。IE9版本可以支持CSS3的 Media Queries。

• Media Queries section on When Can I Use, showing which browsers have support
• Media Queries jQuery plugin (only deals with max/min width)
• css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers

更多的实践者

这里提供一些其他的Media Queries技术的酷酷实践者：Jon Hicks 的网站Hicksdesign使用了Media Queries技术，不单单为移动设备的访问者提供良好的浏览体验，同时也支持那些把浏览器窗口设置过小的桌面浏览器使用者。另外，Simon Collison’s website 和 Ed Merritt’s portfolio 也展示了另外2个这项技术的实际应用案例。

实际体验一下吧！

Media Queries技术是你目前日常工作中可以立即开始使用的一项CSS3技术。值得我们记住的是，支持media queries的浏览器往往也支持很多CSS3的其他属性，这样我们就可以在样式表中添加很多CSS3的属性，比如为Iphone或其他手持设备的用户创建一个圆角矩形。如果你想为你的网站使用media queries，那么读完这篇文章后就开始吧！

堂主目前正在制作的、即将启用的博客新前台模板，便采用了这项技术，使得页面可以在小屏幕的移动设备上依然提供良好体验：

新博客首页模板在线DEMO地址：http://osmn00.com/demo/newblog/

正常桌面浏览器下：

ProtoFluid模拟的Iphone下：