添加断点和管理范围

此功能不适用于 AMPHTML 广告

断点可为文档中的样式变化设置边界。您可以通过两种方式添加断点。一种是直接在标尺中添加;另一种是调整视口大小,以便显示您希望样式发生变化的位置,然后使用“自适应”面板添加新断点。

范围是指两个断点之间的空间。Google Web Designer 可以将每个范围在标尺上方显示为不同颜色的柱形,并在“自适应”面板中显示为范围,以便您跟踪广告中不同的水平范围和垂直范围。不同范围相交形成的各个矩形使用其自有样式表示。您可以通过更改断点来更改范围的形状,也可以整个移除范围。

当媒体规则处于活动状态时,标尺将显示定义的范围、断点以及您正在修改的范围。

Responsive Layout: Advanced Techniques

添加断点

要在标尺中直接添加断点,请执行以下操作:

  1. 确保在“自适应”面板中媒体规则处于选中状态(对于双向广告,确保横向/纵向规则处于选中状态)
  2. 右键点击水平或垂直标尺上您想要添加断点的位置
  3. 从弹出式菜单中选择添加断点

要通过“自适应”面板添加断点,请执行以下操作:

  1. 确保在“自适应”面板中媒体规则处于选中状态(对于双向广告,确保横向/纵向规则处于选中状态)
  2. 将视口拖动到您希望样式发生变化的位置
  3. 点击“自适应”面板底部的添加断点按钮
  4. 从弹出式菜单中选择宽度断点高度断点。系统将添加与视口的相应边缘对应的断点

移动断点

要移动断点,请执行以下操作

确保在“自适应”面板中媒体规则处于选中状态(对于双向广告,确保横向/纵向规则处于选中状态),然后执行以下操作之一:

  • 在标尺中拖动断点
  • 在“自适应”面板的“媒体规则”窗格中点击断点值,向右拖动可增大值,向左拖动可减小值

删除范围

要删除范围,请执行以下操作

确保在“自适应”面板中媒体规则处于选中状态(对于双向广告,确保横向/纵向规则处于选中状态),然后执行以下操作之一:

  • 右键点击您想要删除的范围,然后从弹出式菜单中选择删除选区
  • 在“自适应”面板的“媒体规则”窗格中点击范围,然后点击面板底部的“删除”按钮

创建样式覆盖

创建断点时,您需要为这些断点定义的每个矩形区域设置单独的样式。例如,如果使用一个垂直断点和一个水平断点,您将创建四个样式。创建断点后,您可以随意设置元素的样式。对于每种样式,任何可通过 CSS 定义的内容(包括动画)都是可以变化的。

撤消样式覆盖

在自适应模式下更改样式时,更改后的样式将会覆盖通过“主规则”中设置的默认样式。主样式被覆盖后,属性标签将会突出显示,因此您可以快速看到。

要撤消覆盖,请执行以下操作

  1. 确保在“自适应”面板中媒体规则处于选中状态(对于双向广告,确保横向/纵向规则处于选中状态)
  2. 点击您想要撤消的样式覆盖对应的属性标签。系统随即会显示“覆盖”窗口。
  3. 点击窗口底部的撤消覆盖
该内容对您有帮助吗?
您有什么改进建议?

需要更多帮助?

登录可获取更多支持选项,以便快速解决您的问题