在 Dreamweaver 中创建媒体查询
可使用媒体查询，根据所报告的设备特征指定 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 开发者中心发表的文章，网址为 www.adobe.com/go/learn_dw_medquery_don_cn。
有关来自 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 是站点 www.adobe.com/cn 的站点范围媒体查询文件：
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
使用现有的媒体查询文件
- 创建一个网页，或打开现有的一个网页。
- 选择“修改”>“媒体查询”。
- 选择站点范围媒体查询文件。
- 单击“指定”。
- 如果已用媒体查询创建了 CSS 文件，则选择“使用现有文件”。
- 单击浏览图标以导航至并指定该文件。单击“确定”。
- 选择站点范围媒体查询文件。
- 若要强制设备报告其实际宽度，请确保启用“强制设备报告实际宽度”选项。选择此选项后，将以下代码插入文件中。
<meta name="viewport" content="width=device-width">
- 单击“确定”。
选择其它站点范围媒体查询文件
根据此过程更改在“媒体查询”对话框中设置的站点范围媒体查询文件。
- 选择“站点”>“管理站点”。
- 在“管理站点”对话框中，选择您的站点。
- 单击“编辑”。此时将显示“站点设置”对话框。
- 在左侧面板中的“高级设置”下，选择“本地信息”。
- 在右侧面板的“站点范围媒体查询文件”中，单击“浏览”以选择媒体查询 CSS 文件。
注意:更改站点范围媒体查询文件不会影响链接到其他或以前站点范围媒体查询文件的文档。
- 单击“保存”。
根据媒体查询查看网页
多屏按钮/窗口大小的选项中显示媒体查询中指定的尺寸。从菜单中选择尺寸后，将看到以下变化：
- 视图大小发生变化，以反映所指定的尺寸。但不更改文档帧大小。
- 媒体查询中指定的 CSS 文件用于显示页面。
更多此类内容
- 使用流体网格布局的响应性设计