针对多种屏幕尺寸进行设计

此功能不适用于 AMPHTML 广告

HTML 页面和广告能够以多种尺寸和方向进行显示。如果您知道确切的目标视口尺寸,可以专门针对该尺寸进行设计。如果用户视口的方向或尺寸未知,您可以通过多种方式利用 Google Web Designer 制作能根据视口进行调整的广告或页面。

为每个方向使用单独的页面

对于既可能横向展示也可能纵向显示的广告,最简单的方式是为每个方向使用单独的页面,并使用“备用页面”属性将两者关联起来。当您创建不使用自适应布局的插页式广告时,就会自动采取这种处理方式。针对特定屏幕尺寸制作广告时,这通常是最佳做法。

重要提示:如果您制作了针对每个方向使用单独页面的非自适应广告,而后又将该广告更改为使用自适应布局,那么您需要删除备用页面,然后添加单独的横向和纵向媒体规则,以便广告能够正常展示。

自适应布局

如果您希望制作可以适应多种尺寸的 HTML 页面或广告,而不是针对特定的屏幕尺寸进行设计,则应使用自适应布局。自适应布局利用媒体查询识别不同的视口尺寸并更改布局规则,以便调整文档样式来适应视口。这些布局变化发生在断点(即样式规则发生变化的视口宽度)处。

在 Google Web Designer 中,您可以放置实现水平和垂直视口变化所需的断点,以便制作样式可调整以便在多种尺寸下均正常展示的广告。您还可以制作不同的纵向和横向版本,为每个方向使用单独的一组断点。

当您制作采用自适应布局的双向广告时,系统将创建单个页面,并利用媒体规则确定移动设备的屏幕方向。

自适应广告工作流程

流式设计

对齐可见元素时,您可以将流式设计工具和自适应布局结合使用,让设计中的元素随视口变化按比例移动。例如,不管视口大小如何变化,与左侧相距 30% 的元素始终会与左侧保持这一比例。

该内容对您有帮助吗?
您有什么改进建议?

需要更多帮助?

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