如何在dw中创建媒体查询？使用方法是什么？

“可视媒体查询”栏可直观显示页面中的媒体查询。这些栏可帮助我们可视化不同断点处的网页以及网页组件在不同视口中的回流的差异程度。在不同视口查看页面时，无需影响其他视口的页面设计即可进行特定于某个视口的设计更改。本文小编来教大家如何在dw中创建媒体查询。

可视媒体查询的水平行上有 3 栏，每栏表示媒体查询的一个类别：

绿色：包含 max-width 条件的媒体查询

蓝色：同时包含 min-width 和 max-width 条件的媒体查询

紫色：包含 min-width 条件的媒体查询

每个类别可包含一个或多个媒体查询。如果文档中没有定义媒体查询条件，则将不会显示相应的“可视媒体查询”栏。例如，如果文档不包含 min-width 条件，则将不显示紫色栏。

“可视媒体查询”栏可显示断点值，栏左侧显示 min-width，栏右侧显示 max-width。

隐藏或显示可视媒体查询

“可视媒体查询”栏在“实时”视图中默认为可见。若要隐藏查询栏，请使用工具栏中的“切换可视媒体查询”栏。

在断点间进行切换

若要查看特定大小（断点）的页面，单击对应的媒体查询栏。文档将与断点对齐。

或者，可将 scrubber 拖到所需断点处。

要按 Dreamweaver 文档窗口大小调整视图大小，请执行以下其中一项操作：

· 双击文档右侧灰色区域（在此您会看到“双击以适应宽度”的文本）的任意位置。如果看不到灰色区域，请将 scrubber 拖到左侧。

· 在文档窗口底部的下拉列表中选择“全宽度”选项。

以可视化方式编辑媒体查询

1、单击与要编辑的媒体查询相对应的“可视媒体查询”栏。

将显示调整大小控制点。对于同时具有 min-width 和 max-width 值的媒体查询，查询栏的两侧都将显示调整大小控制点。

2、将控制点拖动到所需大小。

将使用新的 min-width 和/或max-width 值自动更新媒体查询。将显示一条通知，指示媒体查询已成功编辑。如果存在多个对应于可视媒体查询栏的媒体查询，则将更新所有媒体查询。已更新的媒体查询数与成功消息一同显示。