日期:2014-05-17  浏览次数:20769 次

移动设备响应式网站之CSS媒体查询

http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html

简介

现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果,如何在各种大小的屏幕上提供一流的用户体验,答案是:采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。

在本文中,将探索如何将媒体查询用于桌面网站、移动电话和平板电脑。同时还将了解如何检测媒体查询支持,以及如何为尚未支持此项技术的浏览器提供可靠体验。

先决条件

本文中的代码样例被设计为可运行于支持 CSS 媒体查询的网页浏览器中,这些浏览器包括 Mozilla Firefox、Apple Safari、Google Chrome 和 Opera。请参阅?参考资料,获取展示了桌面和移动浏览器中的 CSS3 媒体查询的浏览器兼容性支持的完整列表。

?

响应式设计

响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同。按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果。

例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏,那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的,在较小的 智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上,侧边栏很可能不再是可用的 UI 组件。

有了媒体查询,您就可以编写 CSS,自动将设计更改为提供不同屏幕大小的最佳 UI 体验。

?

媒体查询

从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型。清单 1 展示了一个示例。


清单 1. 使用媒体类型

				
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" hre