wap网站实例

一、范例文件：

• mediaqueries.zip

注意：这是Donald Booth最初编写的一篇文章的更新和扩展版。

移动设备的快速普及完全颠覆了Web设计领域。用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。

媒体查询是向不同设备提供不同样式的一种不错方式，它为每种类型的用户提供了最佳的体验。作为CSS3规范的一部分，媒体查询扩展了media属性（控制您的样式应用方式）的角色。例如，多年来人们常常使用一种独立的样式表，通过指定media="print"来打印网页。媒体查询将这一理念提升到了更高层次，允许设计人员基于各种不同的设备属性（比如屏幕宽度、方向等）来确定目标样式。图1-3演示了媒体查询的实际应用。它们显示了相同网页在桌面浏览器中、平板电脑上和iPod touch上查看的效果。

图1. 当在桌面上查看时，该网页拥有一种两栏布局。

在桌面版本中，该网页拥有一种固定宽度、两栏的布局。但当在平板电脑上查看相同页面时，边栏将移动到主要内容下方。

<link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 649px)" >

 

图2. Media Queries对话框

当在iPod touch中查看时，菜单会重新排列，图像会缩小。使用媒体查询为每种设备提供了不同的样式。

 

图3. 媒体查询重新设置页面的样式，以适应小得多的屏幕的限制。

本文概述媒体查询，包含将帮助您快速开始自己的多屏幕网站开发的示例。

注意：确保也查阅了Adobe TV上的以下视频：“Dreamweaver中的CSS3媒体查询”和“媒体查询如何使针对移动设备和不同屏幕的设计变得更加轻松”。