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

使用CSS 媒体查询功能满足不同屏幕分辨率要求

http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html

?

这是探索Dreamweaver CS5.5的HTML5和CSS3功能的由三个部分组成的教程系列的第三部分。 在第一和第二部分中,通过使用HTML5结构元素和CSS3属性,其中包括圆角(rounded corners)、文本(text)以及框阴影(box shadows)等,你为一个虚拟饭店,Citrus Café,创建并设计了一个web页面。 在这一最后的部分中,你将使用CSS 媒体查询和网站范围的媒体查询文件,在分辨率较小的设备上页面显示进行优化。

CSS 媒体查询允许你根据指定的条件,例如最大和最小屏幕宽度,满足不同设备的式样规则作要求。 你只需要一个版本的HTML标记语言;相应的主要式样均在一个适用于所有设备的式样表中;那些具有较小屏幕分辨率的设备能够获得可以覆盖一些属性的不同式样。

任务概述

为了学习本教程部分,你应该已阅读完成第一和第二部分。 此外,你也可以下载citrus_pt3_start.zip,然后将文件解压到你的本地计算机键盘中。 创建一个名称为Citrus Café的网站,并将citrus文件夹设置为本地网站文件夹。

在第二部分的结尾处,你已在一台桌面计算机上设计了Citrus Café网站主页以便获得最佳显示效果(参见图1)。

图1. 为桌面计算机优化的Citrus Café网站