如何使用流体网格布局功能创建页面时如何在Dreamweaver中创建自定义媒体查询 - 傻瓜

使用流体网格布局功能创建页面时，Dreamweaver会自动为您创建相应的媒体查询，但您可以创建自己的自定义媒体查询并使用它们来定位您自己的CSS规则。

媒体查询已经在网络上使用了十多年，其他用途也是如此，比如为打印优化打印替代页面设计。媒体查询由媒体类型组成，如屏幕或打印（最常见的两种），以及用于检查特定特征（例如高度或宽度）的可选表达式。最常用的媒体类型是

<！全部：适用于所有设备

打印：设计用于打印预览和打印页面时显示
屏幕：用于任何屏幕上显示的内容
手持式媒体类型几乎不再使用，最适用于手机和其他小屏幕，有限带宽和仅支持位图图像的单色显示设备。 iOS设备和大多数智能手机被归类为屏幕媒体类型。

<！如何将样式应用于Dreamweaver页面设计

可以将样式表作为外部文件进行链接或导入，也可以将它们作为内部样式包含在您的头部区域中页面的HTML代码。您甚至可以使用内联样式定位设备 - 如果您只想将特定规则应用于特定设备，则可以使用该选项。

可以使用这些选项的组合，并且可以将多个外部样式表导入或链接到同一个网页。使用要定位的媒体功能定义媒体类型后，可以指定如何将样式应用于页面。

如何在Dreamweaver的外部样式表中使用媒体查询

可以通过两种方式使用具有外部样式表的媒体查询。第一个选项是链接到一个外部样式表和多组由媒体查询分隔的样式。这就是Dreamweaver在创建流体网格布局时链接样式的方式。

第二个选项是将两个或多个单独的外部样式表链接到每个HTML页面，并在每个样式表中包含媒体查询。无论哪种方式，CSS和HTML的代码保存在不同的文件，标签连接它们。

无论是将所有媒体查询和相关样式保存在一个文件中，还是保存在单独的CSS文件中，您都可以将其他样式表链接到任何HTML页面。例如，您可以在单独的样式表中包含一组单独的样式，该样式表旨在将页面发送到打印机时进行格式化。

如何在Dreamweaver中创建媒体查询

您可以在Dreamweaver中创建任意数量的媒体查询，并且可以将它们包含在一个或多个CSS文件中。要在Dreamweaver中创建新的媒体查询，请执行以下步骤：

通过选择窗口→CSS样式打开CSS设计器面板。

在“来源”面板中选择一个现有的样式表，或通过单击“来源”面板中的加号（+）来创建一个新的样式表。

单击CSS设计器面板中@Media面板上的加号（+）。定义介质查询对话框打开。
从第一个下拉列表中选择媒体，然后从第二个下拉列表中选择屏幕。
将光标移到每个下拉列表的右侧，使加号出现，然后单击加号添加新字段。

“媒体查询”对话框中出现一个新字段，以便您可以指定方向。该字段是可选的，但如果您想在平板电脑或智能手机上为横向和纵向视图创建不同的设计，通常会使用该字段。如果您不想根据方向创建其他布局，则可以通过单击减号删除此字段。
注意：
只有当您将光标移到对话框的右侧时，加号和减号才可见。

将光标移到下拉列表的右侧，再次单击加号以添加字段，并输入最小宽度条件。 “最小宽度”字段出现在“媒体查询”对话框中，以便您可以指定要用于定位查询的最小宽度。最小宽度非常重要，因为媒体查询的目标是基于您指定的最小到最大宽度范围的样式，下一步将介绍。

将光标移至下拉列表的右侧，再次点击加号以添加字段，并输入最大宽度条件。 “最大宽度”字段出现在对话框中，以便您可以指定要用于定位查询的最大宽度。点击确定。 “媒体查询”对话框关闭，媒体查询生成并添加到您在“CSS设计器”面板的“来源”面板中选择的样式表中。
要将其他媒体查询添加到任何选定样式表，请重复步骤3-8。要将媒体查询添加到不同的样式表，请重复步骤2-8。

尽管您可以根据需要将媒体查询保存在多个不同的样式表中，但将其全部保存在一个外部样式表中效率更高，因为每个样式表必须单独从服务器下载，需要更多的带宽。使用多个媒体查询下载一个长样式表要比下载多个样式表更有效率。