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

kenkao

浏览: 347856 次
性别:
来自: 深圳

最近访客更多访客>>

s2ed

yhliuyang

xuwenkeke

ricky.yang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript | html5 | css3

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é网站

该桌面设计的宽度为840像素，这对于平板电脑设备以及那些在它们桌面上仍使用较低分辨率的设备来说太大了。为了能够优化平板电脑设备的显示，你需要将宽度降低至700像素。这意味着将需要改变大多数元素的宽度，然而，人们能够从已有的式样表中继承很多式样。

不是将这三个pod互相并排显示在一起，而是将前两个pod制作得更宽一些，然后将 "News" pod延伸至整个屏幕宽度并且放置在它们的下面。包含图像的pod能够在不破坏平衡的情况下进行延伸，这是因为目前 overflow属性隐匿了图像的某些部分。当优化完成之后，该页面下半部分将如图2所示。

图2. 相应的pod已被重新布置以便能够适应平板电脑设备的狭窄视口

对于移动手机来说，需要更进一步地减小该宽度。手机的分辨率范围较大，然而就本教程而言，我已选择使用320像素，这也是iPhone和很多Android智能手机所使用的分辨率。该菜单需要更加紧凑，该饭店的使命声明的大背景图像需要相配，并且相应的pod需要垂直叠放（参见图3）。

图3. 重新设计的同一内容以便于手机显示

使用CSS媒体查询功能满足设备要求

当将一个式样表附着至一个web页面时，你可以使用 media属性来指定你的式样应该应用于哪一种类型的设备。很多设计人员使用media属性提供单独的打印式样表，如下所示：

<link href="css/print.css" rel="stylesheet" type="text/css" media="print">

作为CSS3一部分的CSS 媒体查询，通过允许你指定其它条件，例如颜色的可用性、方位（横向或纵向）、宽高比、宽度以及高度等，使其更进一步。

在媒体查询中设置条件

CSS 媒体查询已在Safari 3、Firefox 3.5和Opera 7中得到支持。此外，Google Chrome也支持CSS 媒体查询，并且Internet Explorer 9最终也赶上了支持队伍。但是，你仍需要满足旧版本浏览器的需求。只要你的主式样表是在没有使用媒体查询的情形下提供的，那么该页面就能够在所有的浏览器中进行式样设计。然后，你可以使用媒体查询满足具有较低分辨率的设备的需求，并且在知识上有信心确保使用新式浏览器的访问者能够看到优化的显示页面。

设置条件的基本语法是用来指定media类型并在圆括号中设置相应的条件，如下所示：

<link href="tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px)">

你可以添加不止一个条件，如下所示：

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)">

此外，你还可以使用带有CSS @import规则的媒体查询，如下所示：

@import url("tablet.css") screen and (min-width:321px) and (max-width:768px);

尽管Dreamweaver CS5.5能够使用@import语法，然而Dreamweaver CS5却可以将媒体查询嵌入<link> 标签中。另外一个差异是Dreamweaver CS5.5能够在media类型前添加关键字 only 。这样的设计宗旨是防止使用旧版本的浏览器带来的潜在问题。

这样，无论你使用 <link> 或者@import都无关紧要。因为两者均产生相同的结果。但是，与@import不同，<link> 标签不能在式样表中使用。 Dreamweaver CS5.5能够充分利用该差异，以便将多个式样表导入至一个被称为网站范围的媒体查询文件中。

注意： 在 W3C网站上有完整的media query规范。它并不是一个很长的文档，因此易于阅读。

在Dreamweaver CS5.5中创建一个网站范围的媒体查询文件

你只需链接能够导入其它式样的网站范围的媒体查询文件，而不用单独地为每一页面链接式样表。下面的指令相当长，然而一旦你学会了创建方法，那么创建一个网站范围的媒体查询文件将只需要几分钟的时间。

注意：Dreamweaver CS5（11.0.3版本）中的Media Queries对话框并不支持网站范围的媒体查询文件的创建。因此，你需要手动地创建该文件。此外，你需要将单独的式样表附着至每一个页面，正如下一章节所描述的那样， "在Dreamweaver CS5中，使用媒体查询附着相应的式样表"。

在Document窗口中，保持index.html的打开状态，然后使用下面方法中的一种打开Media Queries对话框：
- 选中Modify > Media Queries.
- 在Media Queries对话框顶部的Write media queries to部分中，单击Specify。
- 在Multiscreen面板中，单击Media Queries按钮。
在Media Queries对话框顶部的Write media queries to部分中，单击Specify。
在Specify Site-wide Media Query File对话框中，从CSS File弹出菜单中选中Create new file，并单击文本输入字段右侧的文件夹图标。这将打开Save File As对话框。
导航至css文件夹，在File name字段中输入 citrus_mq.css 并单击Save。
现在，在Specify Site-wide Media Query File对话框中应该显示新文件的位置（参见图4）。

图4. 网站范围的媒体查询文件将在新的位置中创建

单击OK。现在，该新文件将作为Site-wide media queries file在Media Queries对话框中列出。选中旁边的单选按钮以确认你希望使用它（参见图5）。

图5. 网站范围的媒体查询文件已被设置为citrus_mq.css

核查"Force devices to report actual width"复选框已被选中。
在Media Queries对话框的下半部分中，单击Default Presets按钮。这将创建一个含有三个建议的式样表设置的列表，而它们是通过使用媒体查询提供的（参见图6）。

图6. 默认预设置给出媒体查询的最常用设置的建议

现在，你需要为每一设置指定相应的式样表的名称。当 Phone 被选中时，确保CSS File 弹出菜单设置为 "Create new file,"，并且单击输入字段右侧相应的文件夹图标。
导航至css文件夹，在File name 字段中输入 phone.css，并单击Save。

注意： 不要担心citrus_mq.css未在css文件夹中列出。在你关闭Media Queries对话框前，Dreamweaver不会创建新的式样表。
选中Tablet，并按照你为Phone创建式样表的同一方式创建一个名称为 tablet.css 的新式样表。
选中Desktop。由于该式样表已经存在，因此，在单击相应的文件夹图标之前，需要将CSS File弹出菜单设置为 "Use existing file" ，并且选中desktop.css。
如图7所示，在单击OK前，需要核查Media Queries对话框中的相关设置。

图7. 网站范围的媒体查询文件以及它的三个依赖文件（dependent file）已被指定

在Code视图中检查index.html的 <head> Dreamweaver已插入一个 <meta>标签并链接了相应的网站范围的媒体查询文件，即citrus_mq.css（参见图8）。

当应用媒体查询时，视口 <meta>标签能够指示移动设备使用相应屏幕的实际宽度（device-width）。在没有该标签的情况下，大多数新式移动设备会忽略媒体查询，并缩放桌面版本以适应屏幕的尺寸，然而，在没有重新缩放的情况下，这样做却会导致文本阅读困难。

图8. Dreamweaver在<head>中插入一个<meta>标签和一个<link>标签

该桌面式样表包含于网站范围的媒体查询文件中，因此，你需要从index.html的 <head> 中删除它。删除desktop.css <link> 标签（参见图8第七行）。
选中File > Save All Related Files。不要担心index.html是否会变成非式样化。这可能意味着Design视图宽度小于769像素。现在，媒体查询已被应用到Design视图，并且在phone.css或者tablet.css中并没有相应的式样规则。
在Related Files工具条中选中citrus_mq.css以便于检查相应的代码（参见图9）。

图9. 网站范围的媒体查询文件使用@import 来包含每一个式样表的规则

desktop.css中的式样需要应用到所有浏览器，甚至包括那些不支持媒体查询的浏览器。此外，phone.css和tablet.css中的规则还需要覆盖desktop.css中的基本规则。因此，你需要将desktop.css的@import规则移至该页面的顶部，然后删除媒体查询（参见图10）。

图10. 现在，desktop.css中的式样需要层叠到其它式样表上

保存citrus_mq.css。如果你在Design视图中进行单击操作，则你应该重新设计相应的页面式样。

只为一个页面进行所有这些式样设计可能看起来是多余的，然而，对于具有许多页面的网站来说，创建网站范围的媒体查询文件具有显著的优势。当你下一次打开Media Queries对话框时，相应的网站范围的媒体查询文件已处于选中状态。所有你需要做的操作仅仅是单击OK。 Dreamweaver能够自动地附着该文件并插入视口<meta>标签。此外，如果你希望对媒体查询进行一些修改，那么你只需要编辑网站范围的媒体查询文件，而无需在每一页面中进行同一修改。

Dreamweaver能够将网站范围的媒体查询文件添加到你的网站定义中。如果你希望改变或者删除相应的文件，那么选中Site > Manage Sites并编辑相应的网站定义。相应的网站范围的媒体查询文件放置于Advanced Settings > Local Info。

下面章节的目标读者是使用Dreamweaver CS5 (11.0.3)的开发人员。如果你不感兴趣，跳至章节 "为平板电脑设备优化式样"。

使用Dreamweaver CS5的媒体查询附着式样表

Dreamweaver CS5 (11.0.3)中的Multiscreen Preview面板能够自动创建基于宽度的媒体查询。你需要的所有操作是指定你希望的目标设备的最小和最大宽度

在css文件夹中创建两个名称分别为phone.css和tablet.css的空白式样表。
注意： 尽管在Multiscreen Preview面板中有一个创建新式样表的选项，然而首先创建它们操作更为简单。
关闭式样表，并且在单击Document工具条中的Multiscreen按钮（参见图11）前确保index.html是激活的文档。此外，你也可以选中Window > Multiscreen Preview。

图11. 使用Multiscreen按钮启用Multiscreen Preview面板

此时只定义了一套式样，因此，Multiscreen Preview面板中的所有三个视口均能够显示为桌面优化的设计，显然，这对于手机和平板电脑设备来说仍然太大。
单击该面板右上部的Media Queries按钮以便于打开Media Queries对话框。
你可以通过编辑文本框中的值来改变手机和平板电脑设备的最大宽度，然而对于本教程来说，保持它们的默认值不变：即Small (Phone)为320像素、而Medium (Tablet)为768像素。
为前两个选项选中 Use existing CSS file ，并单击文本框旁边的文件夹图标以便分别选中phone.css和tablet.css。
将Large (Desktop)的选项设置为 Do not target large screens。
Media Queries对话框中的相关设置应该如图12所示。单击OK。

图12. 设置media query选项

Dreamweaver能够将新的式样表链接至index.html，并且能够创建媒体查询。在Code视图中做相应的检查以便确认phone.css和tablet.css均已被附着在desktop.css下，如图13所示。

图13. 带有媒体查询的新式样表必须在主式样表之后出现

为了确保移动设备能够不妨碍媒体查询，需要将下面的位于链接之上的 <meta> tag 标签添加到三个式样表中：

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

保存index.html。

在旧版本的浏览器从市场上消失之前，最好为每个浏览器提供一个标准式样表，并且只将带有媒体查询的较低分辨率的设备作为目标设备。由于每个浏览器均可获得desktop.css，因此其它式样表只需要覆盖那些不同的规则即可。当媒体查询获得普遍支持时，你将能够为每一类型的设备提供一个单独的式样表。

为平板电脑设备优化式样

如果你的设备支持双显示器设置，那么你在你的主显示器上的Document窗口中继续工作的同时，可以将Multiscreen Preview面板移至你的辅显示器中。但是，即使设备支持双显示器设置，我仍发现我常常将Multiscreen Preview面板最小化，并且只在Split视图中工作。这是因为Design视图和Live视图均能够响应媒体查询，并能够根据Document窗口的Design视图部分的宽度，在合适的式样表中应用这些式样。

将Multiscreen Preview面板移至你的辅显示器上，或者通过单击右上角的双箭头最小化该面板。
选中Related Files工具条中的tablet.css，并为它添加下面的式样规则：

#container { width:700px; }

这将覆盖决定页面内容宽度的规则。

在Dreamweaver CS5.5中，通过选中View > Window Sizes或者使用本教程系列第一部分中描述的一种其它方法打开Window Sizes菜单，并选中768 X 1024 Tablet以便重新调整Document窗口视口的大小。

在Dreamweaver CS5 (11.0.3)中，你需要手动重新调整Document窗口的Design视图部分的大小，直到Dreamweaver能够在布局中显示较窄的宽度。

当你重新调整Document窗口的大小时，Dreamweaver的两个版本的表现有所不同。 Dreamweaver CS5.5能够产生一个水平滚动条，而在Dreamweaver CS5中，最后一个菜单条目会降到下一个级别， "News" pod也是这样，并且使命声明的相应背景图像也会伸出页面的右侧边缘。无论你使用哪一个版本，目标都是一样的—使得相应的布局能够适合狭窄的视口。
相应的images文件夹包含一个中等大小版本的徽标。在tablet.css中创建一个新的式样规则，以便于使用较小的图像，并且调整该徽标的高度，如下面的代码片段所示。

注意： 为了避免冗长的描述，我只会给出相应的式样规则。如果你更喜欢使用New CSS Styles和CSS Rule Definition对话框，那么请使用它们。此外，请确保New CSS Styles对话框在tablet.css中保存该新的式样。但是，你可能会发现相应的代码提示使得直接在Code视图中进行操作速度更快。

#logo { background-image:url(../images/med_logo.jpg); height:100px; }

按下F5以便刷新Design视图。现在，该徽标更加紧凑，然而你需要将菜单移至更高位置以便对此进行补偿。
将 <nav> 元素上的顶部填充（top padding）改为 110px:

nav { padding-top:110px; }

为了能够更加准确地了解你对布局所作的修改，你需要激活Live视图。
相应的菜单条目需要减小宽度以便于适合700px容器，然而，它们还需要与使命声明的背景图像协调一致，而该图像的宽度为669px。

当前的式样在每一侧均添加10px的填充，以及1px的边界。在菜单中将链接的宽度减小至114px，这样菜单的总体宽度为680px。此外，相应的字体大小也需要变小一点。添加下面的规则：

nav ul { font-size:18px; } nav ul a { width:114px; }

按下F5以便于刷新Live视图。现在，相应页面的顶部应该如图14所示。

图14. 在较低的分辨率下，现在徽标和菜单看起来要更加紧凑

maincontent <div>需要与相应的容器具有相同的宽度。此外，你还可以删除顶部和底部的填充以便使得它更加紧凑，然而，你需要留一点左边距以便内容与菜单均衡，因为该菜单比下面的使命声明和pod要稍宽一些。修改之后的规则如下所示：

#maincontent { padding: 0; margin-left:5px; width: 700px; }

接下来，调整使命声明。相应的背景图像较小（669 x 242），因此，宽度、高度以及右侧填充均需要改变。此外，相应的字体也需要变小。修改之后的式样块如下所示：

#vision { background-image:url(../images/med_hero.jpg); width: 289px; height:217px; padding-top:45px; padding-right:350px; font-size:26px; }

现在，可以对带有图像的两个pod进行扩展，以便显示每一个图像的完整宽度（302px）。为了能够平衡相应的布局， "Events" pod在左侧需要添加额外的边距。为 "Events" <section> 提供一个ID，并为tablet.css添加下面的定义：

.pod { width: 305px; } .podContent { width: 302px; height:180px; } #events { margin-left:7px; }

"News" pod的宽度仍与其它的两个pod相同，然而，却放在下面。你需要使它的宽度与其它两个合起来的宽度一样，并且在它们之间添加一些空间。相应的式样定义如下所示：

#news { width:650px; margin-top:20px; }

最后，你需要给页脚段落添加一个较窄的左边距，以便将它们从边界向内移动：

footer p { margin-left:5px; }

保存tablet.css，并在Multiscreen Preview面板中比较两个布局（参见图15）。

图15. 在Multiscreen Preview面板中比较桌面和平板电脑布局

这一细微的变更使得你能够在不损害相关内容的情形下传递相同的设计理念。但手机的设计内容范围仍太广。你将在随后的章节中讨论它们。

为手机优化式样

为手机重新设计页面式样的过程非常相似。成功的关键是确保基础的HTML结构遵循一个逻辑线性进程。然后，你可以在一个单一的栏中展示相应的内容，并删除不必要的背景图像或者使用较小的图像变体替代它们。你可以将 display 属性设置为 none 以便于隐藏该页面的某些部分。尽管这超过了本教程讨论的范围，然而当用户单击一个触发（trigger）元素时，你还是能够使用JavaScript来显示隐藏的部分。

在Related Files工具条中选中phone.css。
相应的images文件夹包含一个较小版本的徽标。由于phone.css中的式样只用于最大宽度是320px的设备，因此相应容器的宽度需要设置为 100%，并且该徽标应该居中以防止使用更小的屏幕对它进行显示。
将下面的式样规则添加到 phone.css中：

#container { width: 100%; } #logo { height:auto; width:270px; background-image: url(../../images/sml_logo.png); margin-left:auto; margin-right:auto; }

在Dreamweaver CS5.5中，打开Window Sizes菜单，并选中320 x 480 Smart Phone。在Dreamweaver CS5 (11.0.3)中，手动重新调整Design视图的大小，直到它的宽度大概是320像素为止。
如果有必要的话，激活Live视图，并按下F5来刷新相应的布局。现在，该页面看起来杂乱无章（参见图16）。

图16. 在重新调整Live视图的大小之后，该页面看起来杂乱无章

菜单按钮尺寸有误并且位置太低。添加下面的式样定义：

nav { padding-top:100px; } nav ul { font-size:24px; } nav ul a { padding-right: 0; width:97%; } nav ul li { float:none; } nav ul li:hover { margin-top:0; }

对于手机屏幕来说，需要增大字体以便更易于阅读。链接的宽度设置为97%，并且列表条目不再浮动。此外，通过将 margin-top设置为零可以使得让悬停的菜单按钮产生动画效果的规则也变得无效。悬停对触摸屏来说毫无意义，然而有些手机，例如BlackBerry，具有鼠标指针。当按钮垂直堆叠时，对它们赋予动画效果将导致它们重叠并且很可能令人发狂。

由于徽标的高度已被设置为auto，并且相应的菜单条目不再浮动，因此你需要从 maincontent <div>中删除上边距。与此同时，删除相应的填充以便为相关内容提供更多空间。此外，使命声明的背景图像还需要相配，并且相应的文本需要更小一些。修改之后的规则如下所示：

#maincontent { margin-top: 0; padding: 0; } #vision { background-image:none; width: 280px; height:auto; font-size:16px; line-height:normal; padding-top:0px; }

此外，还需要对相应的宽度和高度进行声明以便覆盖desktop.css中的相关值。

剩下的式样规则能够将pod设置为全宽度（full width），并将页脚条目从边界移走。

.pod { width: 305px; } .podContent { width: 302px; height:180px; } footer p { margin-left: 5px; } #facebookTwitter { margin-right:5px; }

保存phone.css，并在Multiscreen Preview面板中比较三个布局（参见图17）。

图17. 一个HTML页面，但包含三个优化的布局

如果你不想在手机布局的pod中显示图像，那么修改式样的最后部分，如下所示：

.pod { width: 305px; padding-bottom:0; } .pod h1 { margin-bottom:0; } .podContent { width: 302px; height:180px; display:none; } #news .podContent { display:block; }

这将从pod底部删除相应的填充，并且从pod标题底部删除相应的边距。通过将 podContent 类的 display 属性设置为 none可以隐藏相应的图像。此外，它还能够隐藏 "News" pod的内容，因此你需要添加一个额外的规则以便于将由#news ID衍生的 podContent 类的 display 属性设置为 block 。

图18给出相应的结果。

图18. 隐藏图像pod以便获得更加紧凑的布局

现在你明白了吧：通过平板电脑设备和手机的两个短式样表的相加可以得到单一HTML页面包含的三个统一布局。

下一步阅读方向

在经过多年似乎无处可去的窘境之后，HTML5和CSS3正迅速地成为现实，并从此改变将网站传递到越来越多设备的方式。在浏览器能够完全支持这些新技术之前，仍有相当长的路要走，但增强的Dreamweaver CS5.5功能意味着你可以立即在你的网站中开始使用它们。采用HTML5的唯一重大障碍是Internet Explorer 6至8不能将CSS应用到新的结构元素中。但是，你可以通过使用大小只有2KB的Remy Sharp's JavaScript文件，或通过确保你只对HTML 4.01/XHTML 1.0元素应用式样来克服该障碍。

由于不支持CSS3属性的浏览器只不过忽略它们，因此使用它们不会带来损害。并且当用户升级到一个更新式的浏览器时，他们会立即从你的页面增强功能获得利益。当使用CSS 媒体查询时，请将你的主式样放置于一个不是通过媒体查询链接的式样表中。否则，你的网站将在大部分不支持媒体查询的浏览器中不能进行式样设计。

你可能会发现下面的资源在学习HTML5和CSS3的过程中非常有用：

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论