创建媒体查询

上次更新日期: 2021年4月27日

可使用媒体查询,根据所报告的设备特征指定 CSS 文件(响应性设计)。 设备上的浏览器检查媒体查询,然后使用对应的 CSS 文件显示网页。

例如,以下媒体查询指定 phone.css 文件用于宽度为 300-320 像素的设备。

<link href=\"css/orig/phone.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all and (min-width: 300px) and (max-width: 320px)\">

有关媒体查询的详细介绍,请参阅 Don Booth 在 Adobe Developer 中心发表的文章 www.adobe.com/go/learn_dw_medquery_don_en

有关 W3C 媒体查询的更多信息,请参阅 www.w3.org/TR/css3-mediaqueries/

创建媒体查询

在 Dreamweaver 中,您可以创建站点范围的媒体问题文件或特定于文档的媒体问题。

站点级媒体查询文件

指定包含该文件的站点中所有页面的显示设置。

站点范围的媒体问题文件充当站点中所有媒体问题的中央存储库。创建此文件后,从站点中那些必须使用该文件中的媒体问题进行显示的页面关联到该文件。

特定于文档的媒体查询

媒体查询直接插入到文档中,页面会根据插入的媒体查询进行显示。

创建网页。

选择“修改”>“媒体查询”。

执行下列操作之一:

  • 要创建站点范围的媒体问题文件,请选择"站点范围的媒体问题文件"。

  • 要创建文档特定媒体查询,请选择此文档。

对于站点范围媒体查询,执行以下操作:

单击“指定”。

选择“新建文件”。

指定该文件的名称,然后单击“确定”。

某些设备可能不会报告其实际宽度。要强制设备报告其实际宽度,请确保启用"强制设备报告实际宽度"选项。

当您选择此选项时,以下代码将插入到您的文件中。

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

执行下列操作之一:

  • 单击"+"以定义媒体问题文件的属性。

  • 如果您想从标准预设开始,请单击"默认预设"。

在表格中选择行,然后使用"属性"下的选项编辑其属性。

说明

必须使用 CSS 文件的设备描述。例如,手机、电视、平板电脑等等。

“最小宽度”和“最大宽度”

对于其报告宽度在指定值范围内的设备使用该 CSS 文件。

注释

如果不想为设备指定一个明确的范围,则请将“最小宽度”或“最大宽度”留空。 例如,如果要以手机(宽度为 320 像素或更小)为目标,则通常将“最小宽度”留空。

CSS 文件

选择"使用现有文件",然后浏览到该设备的 CSS 文件。

如果您想指定一个尚未创建的 CSS 文件,请选择"创建新文件"。输入 CSS 文件的名称。按“确定”后即创建该文件。

单击“确定”。

对于站点范围媒体查询,创建一个新文件。 保存该文件。

站点范围的媒体查询:对于现有页面,请确保在所有页面的 <head> 标记中都包含媒体查询文件。

媒体问题关联示例,其中 mediaquery_adobedotcom.css\n是地点的全站媒体问题文件 www.adobe.com:

<link href=\"mediaquery_adobedotcom.css\" rel=\"stylesheet\" type=\"text/css\">

使用现有的媒体查询文件

创建一个网页,或打开现有的一个网页。

选择“修改”>“媒体查询”。

选择站点范围媒体查询文件。

单击“指定”。

如果您已经创建了包含媒体问题的 CSS\n文件,请选择"使用现有文件"。

单击浏览图标以导航至并指定该文件。 单击“确定”。

选择站点范围媒体查询文件。

要强制设备报告其实际宽度,请确保\n启用"强制设备报告实际宽度"选项。当您选择此选项时,以下代码会插入到您的文件中。

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

单击“确定”。

选择不同的全站媒体查询文件

使用此步骤更改您在"媒体问题"对话框中设置的全站媒体问题\n文件。

选择“站点”>“管理站点”。

在“管理站点”对话框中,选择您的站点。

单击“编辑”。 此时将显示“站点设置”对话框。

在左侧面板中的“高级设置”下,选择“本地信息”。

在右侧面板的"全站媒体问题文件"中,单击"浏览"\n以选择媒体问题 CSS 文件。

注释

更改全站媒体查询文件不会影响链接到不同或先前全站媒体查询文件的文档。

单击“保存”。

基于媒体查询查看网页

媒体问题中指定的尺寸会显示在"多屏幕"按钮/窗口大小选项中。当您从菜单中选择 Dimension 时,会看到以下更改:

  • 视图大小发生变化,以反映所指定的尺寸。 但不更改文档帧大小。

  • 媒体查询中指定的 CSS 文件用于显示页面。