CSS3 Media Query：移动 Web 的完美开端

移动时代，是任何 Web 设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸 的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了 CSS3。

CSS3 的 Media Queries

在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：

• 浏览器窗口的宽和高
• 设备的宽和高
• 设备的手持方向，横向还是竖向
• 分辨率

如果用户有一个支持 Media Queries 的设备，我们就可以为该设备编写专门的 CSS，让网站适应这个设备的小屏幕，英国的 Web 技术大会 dConstruct 便基于该技术推出他们的 2010 年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图：

这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等设备上有完全一致的表现。

使用 Media Queries 为手机创建单独的 CSS

我们举一个简单的两栏式结构的例子。

为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小 header 部分的图片大小。

使用 Media Queries 最直接的方法是，在你的 CSS 代码中，加一段独立代码分支，如下：

更多资源

• 后 移动时代的 Web 设计
• A List Apart – Responsive Web Design （ALA - 反应灵敏的 Web 设计）
• Apple – Safari Web Content Guide （Apple - Safari Web 内容指引）
• Sitepoint CSS Reference – Media Queries （SitePoint 的 CSS 参考手册 - Media Queries）
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries （使用 CSS3 Media Queries 实现面向 iPhone 4 高精细显示屏的设计）
• Aral Balkan: How to make your web content look stunning on the iPhone 4’s new Retina Display （Aral Balkan：如何让你的 Web 内容在 iPhone 4 的高精细屏上更好地显示 ）
• Stuff and Nonsense: Proportional leading with CSS3 Media Queries （使用 CSS3 Media Queries 实现按比例行间距）
• Matthew James Taylor: iPad layout with landscape and portrait modes （iPad 的水平和垂直布局模式）

在旧浏览器上支持 Media Queries

如果你面向的访问者是 iPhone， Opera Mini 等移动设备，这没有问题，对于那些不支持 Media Queries 的浏览器（像 IE6/7/8），以下文章或许对你有帮助。

• Media Queries section on When Can I Use, showing which browsers have support （Media Queries 的浏览器支持情况）
• Media Queries jQuery plugin (only deals with max/min width) （Media Queries jQuery 插件）
• css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers （在不支持 Media Queries 的浏览器中实现对 Media Queries 的支持）

更多示例

Jon Hicks 在 Hicksdesign 基于 Media Queries 实现了非常好的浏览体验，不仅针对移动设备，还面向那些拥有小屏幕的桌面系统。另外，还可以看看 Simon Collison’s website 以及 Ed Merritt’s portfolio 这些网站中对这种技术的运用。

本文作者

Rachel Andrew

Rachel Andrew 是一名 Web 前端设计师与后端开发者，是一家英国 Web 开发顾问公司 edgeofmyseat.com 的主管，她还是一款小型 CMS 系统 Perch 的设计者。她写过多本 Web 开发与设计相关的书，包括由 SitePoint 出版的 CSS Anthology: 101 Essential Tips, Tricks and Hacks，她的个人博客是 rachelandrew.co.uk 。

本文国际来源：Smashing Magazine How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

中文翻译来源：锐商企业CMS 网站内容管理系统 官方网站