在 Dreamweaver 中创建和使用媒体查询

媒体查询是一种 CSS3 模块，可帮助您通过为不同设备或媒体类型定义不同的样式规则来设计响应式网站。 根据这些规则，系统会渲染内容以适应各种条件，例如屏幕尺寸、浏览器窗口尺寸、设备尺寸和方向以及分辨率。

可使用 @media 规则将媒体查询添加到 CSS。 或者，您可以为不同的媒体类型创建单独的样式表，然后使用以下语法调用它们：

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

设备上的浏览器检查媒体查询，然后使用对应的 CSS 文件显示网页。 

有关详细信息，请参阅此文章。

您可以通过将相关的代码添加到 HTML 或 CSS 文件来添加媒体查询。 此外，Dreamweaver 还让您能够使用以下功能轻松创建和管理媒体查询：

• 可视化媒体查询栏
• CSS Designer

“可视媒体查询”栏

“可视媒体查询”栏可直观显示页面中的媒体查询。 这些栏可帮助您可视化不同断点处的网页以及网页组件在不同视口中的回流的差异程度。 在不同视口查看页面时，无需影响其他视口的页面设计即可进行特定于某个视口的设计更改。

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

• 绿色：具有 max-width 条件的媒体查询
• 蓝色 ：同时具有 min-width 和 max-width 条件的媒体查询
• 紫色 ：具有 min-width 条件的媒体查询

CSS 设计器面板中列出的媒体查询也带有这些颜色前缀。

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

断点值显示在条上，最小宽度位于条的左侧，最大宽度位于条的右侧。

隐藏或显示可视化媒体查询

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

在断点间切换\n

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

或者，您可以将滑块拖动到所需的断点。

要将视图大小调整为 Dreamweaver 文档窗口的大小，请执行以下操作之一：

• 双击文档右侧灰色区域（在此您会看到“双击以适应宽度”的文本）的任意位置。 如果您看不到灰色区域，请将滑块向左拖动。
• 在文档窗口底部的下拉列表中选择"全宽"选项。

如果您看不到此选项，请拖动滑块以减小网页的大小。

可视化编辑媒体查询

要撤消，请按 Ctrl+Z (Win) 或 Cmd+Z (Mac)。

或者，您也可以双击断点值，然后使用键盘输入数值。 

添加新的媒体查询

要撤消，请按 Ctrl+Z (Win) 或 Cmd+Z (Mac)。

删除媒体查询

要撤消，请按 Ctrl+Z (Win) 或 Cmd+Z (Mac)。

查看媒体查询的代码