Dreamweaver CC教程：“可视媒体查询”栏

Dreamweaver CC教程：“可视媒体查询”栏

使用可视媒体查询即可在与不同大小的屏幕所对应的各个断点处查看并编辑网页。
媒体查询是一种 CSS3 模块，可帮助您通过为不同设备或媒体类型定义不同的样式规则来设计响应式网站。基于这些规则，呈现的内容可适应多种条件，如屏幕大小、浏览器窗口大小、设备大小和方向以及分辨率。
可使用 @media 规则将媒体查询添加到 CSS。或者，也可针对不同的媒体类型创建独立的样式表，然后使用以下语法进行调用：

1
2
3

<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

这两种方法间的基本差别在于视觉方面。如果您更喜欢在“实时”视图中编码并查看更改，请使用 CSS Designer。如果您更喜欢在不同的断点可视化页面并同时进行设计更改，可视媒体查询是更好的选择。

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

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

注意:
CSS designer 面板中列出的媒体查询也以这些颜色为前缀。
每个类别可包含一个或多个媒体查询。如果文档中没有定义媒体查询条件，则将不会显示相应的“可视媒体查询”栏。例如，如果文档不包含 min-width 条件，则将不显示紫色栏。
“可视媒体查询”栏可显示断点值，栏左侧显示 min-width，栏右侧显示 max-width。

断点值

A. 断点 B. “可视媒体查询”栏 C. 添加媒体查询图标 D. Scrubber