管理媒体规则和覆盖设置

AMPHTML 广告不支持任何自适应功能。视频广告、GIF 动画和图片广告可以使用多尺寸版式。

自适应版式概述

通过媒体规则，您可以针对不同视口尺寸覆盖默认样式和其他属性。媒体规则适用于特定尺寸或尺寸范围。

如需使用媒体规则，请执行以下操作：

1. 打开“自适应”面板，并确保“大小和范围”标签页下的自适应版式框处于选中状态。
2. 在面板中选择一个尺寸或尺寸范围，为相应媒体规则指定覆盖设置。

选定媒体规则后，如果有面板和操作无法限定为仅针对特定尺寸，这些面板和操作会被停用。例如，您不能添加新元素或修改事件。如需进行此类更改，请先在“自适应”面板中选择修改基本文档。

适用于特定尺寸的媒体规则

对于您希望自己的广告素材投放到的广告位，您可能知道其确切尺寸。在这种情况下，您可以设置针对这些特定尺寸的媒体规则。

常用尺寸

“自适应”面板中“大小和范围”标签页下的尺寸部分会列出当前文件的广告环境所对应的常见广告尺寸。您无法修改或删除这些尺寸。

自定义尺寸

您可以向“自适应”面板中添加更多尺寸。

添加自定义尺寸

1. 点击  添加自定义尺寸。
2. 输入所需尺寸，然后按 Enter 键。

修改自定义尺寸

1. 将鼠标悬停在您要修改的尺寸上。
2. 点击“修改” 图标。
3. 输入新尺寸。

删除自定义尺寸

1. 将鼠标悬停在您要删除的尺寸上。
2. 点击“删除” 图标。

针对尺寸范围的媒体规则

范围媒体规则适用于您指定的尺寸范围内的所有尺寸。您可以选择将范围媒体规则限制为仅适用于纵向或横向。

范围媒体规则的尺寸范围不能相互重叠。不过，范围媒体规则可以与适用于特定尺寸的媒体规则重叠，在这种情况下，系统会针对相应尺寸同时应用这两组覆盖设置。如果存在冲突，则以针对特定尺寸的媒体规则为准。

管理范围媒体规则

如需直观呈现范围媒体规则，请点击“自适应”面板中“大小和范围”标签页的“范围媒体规则”部分的管理范围媒体规则 按钮。您也可以点击范围媒体规则的更多 按钮，然后从弹出式菜单中选择打开对话框…。

此范围媒体规则会影响两种带样式覆盖设置的投放尺寸

对话框中会显示视口工作区，该区域的边框是指示宽度和高度的标尺。每个投放尺寸都会在视口工作区中相应的宽度和高度坐标处显示为一个点。

范围媒体规则会显示为形状，勾勒出视口工作区的相应部分。适用于任意方向的范围媒体规则会显示为矩形，而限制为仅适用于纵向或横向的范围媒体规则可能显示为其他形状。

投放尺寸在视口工作区中会显示为小方形，以便您查看它们是否会受范围媒体规则的影响。带覆盖设置的投放尺寸会显示为黄色。您无法在对话框中修改投放尺寸。

添加范围媒体规则

• 在面板中：
  1. 点击  添加尺寸范围。
  2. 输入尺寸范围的最小和最大尺寸。
  3. 按 Enter 键。
• 在对话框中：
  1. 在视口工作区内点击并按住鼠标左键，然后拖动鼠标绘制一个矩形。
     • 如果矩形变为红色，则表示尺寸范围与现有尺寸范围重叠，因此无法设置。
  2. 点击保存。

更改范围媒体规则的适用方向

您可以指定范围媒体规则的适用方向，以便覆盖设置仅在视口为横向或纵向时才会生效。

1. 点击范围媒体规则旁边的“方向”下拉菜单。
2. 选择新方向：
   • 任意方向
   • 横向
   • 纵向

修改尺寸范围

• 在面板中：
  1. 将鼠标悬停在范围媒体规则上，然后点击“修改” 图标。
  2. 为尺寸范围输入新的最小和最大尺寸。
• 在对话框中：
  1. 选择您要修改的范围媒体规则。媒体规则形状周围的蓝色方框上会显示大小调整手柄。
  2. 将形状拖动到新位置，或拖动其中一个手柄。
     • 如需保持宽高比，请在拖动大小调整手柄时按住 Shift 键。
     • 如果方框变为红色，则表示新尺寸范围与现有尺寸范围重叠，因此无法设置。
  3. 点击保存。

覆盖设置

利用覆盖设置，您可以通过针对不同视口尺寸调整属性来优化版式。

您可以在媒体规则中更改通过 CSS 定义的任何内容，包括尺寸、位置、可见性、来源和动画。此外，Google Web Designer 还允许您覆盖图片来源、组件属性、文字内容和文字调整设置等其他属性。选定媒体规则后，无法覆盖的属性会被停用。

查看覆盖设置

当前所选尺寸或尺寸范围的覆盖设置会显示在覆盖设置标签页下的自适应面板中。系统会列出具有覆盖设置的各个元素，以及具有已覆盖值的属性。

过滤覆盖设置列表

您可以使用面板顶部的下拉菜单过滤覆盖设置列表：

• 全部 - 显示所有覆盖设置。
• 当前页面 - 显示当前页面上元素的覆盖设置。
• 选择 - 显示所选元素的覆盖设置。

管理覆盖设置

添加或更改覆盖设置

1. 在自适应面板的“大小和范围”标签页中选择媒体规则。相应媒体规则将在面板中突出显示，并显示在场景的左上角。
2. 根据需要进行更改。

在以下位置，被覆盖属性的标签会以黄色突出显示：在属性面板中、在时间轴中（如果动画发生了更改）或在文字面板中（如果文字内容或文字调整设置发生了更改）。

       

黄色覆盖设置指示器示例

在“自适应”面板中，带覆盖设置的尺寸会显示应用于特定尺寸的媒体规则 图标。

复制媒体规则的覆盖设置

1. 请执行以下操作之一：
   • 复制针对特定尺寸的覆盖设置：右键点击自适应面板中的相应尺寸。
   • 复制针对尺寸范围的覆盖设置：将鼠标悬停在自适应面板中的相应尺寸范围上，然后点击随即显示的更多 图标。
2. 从弹出式菜单中选择复制覆盖设置。
3. 请执行以下操作之一：
   • 将覆盖设置粘贴到特定尺寸：在自适应面板中右键点击相应尺寸。
   • 将覆盖设置粘贴到尺寸范围：将鼠标悬停在自适应面板中的相应尺寸范围上，然后点击随即显示的更多 图标。
4. 从弹出式菜单中选择粘贴覆盖设置。

移除覆盖设置

1. 点击覆盖设置的黄色属性标签。
   • 大多数覆盖设置在属性面板中都会有相应指示。
   • 动画的覆盖设置在时间轴中会有指示。
   • 您可以在文字面板中查看文字内容或文字调整设置的覆盖设置。
2. 在弹出式对话框中选择移除覆盖设置。

移除媒体规则的所有覆盖设置

• 对于特定尺寸：
  1. 右键点击相应尺寸的应用于特定尺寸的媒体规则 图标。
  2. 从弹出式菜单中选择移除覆盖设置。
• 对于尺寸范围：
  1. 将鼠标悬停在相应范围媒体规则上。
  2. 点击“更多” 图标。
  3. 从弹出式菜单中选择移除覆盖设置。