自适应版式概述

AMPHTML 广告视频广告不支持任何自适应功能。

自适应设计采用能够适应不同视口方向或尺寸的灵活版式,这样您就无需创建多个版式。Google Web Designer 为您提供了多种用于构建自适应设计的工具。

您的文档至少应具有自适应页面尺寸。在创建浮动版式时,您还可以使用百分比值来定义对象尺寸和位置。如需针对不同视口尺寸或尺寸范围自定义每个元素,请使用媒体规则。

自适应页面尺寸

使整个文档具有自适应性

自适应文档的页面宽度和高度应设为 100%,以占满屏幕上的所有可用空间。

  • 现有文档:在自适应面板中,选中自适应版式复选框。

  • 新文件:在“新建文件”对话框中指定尺寸时,选中自适应版式复选框。并非所有文件类型都可以使用此选项。

要使页面上的内容具有自适应性,您可以使用浮动版式和媒体规则。

浮动版式

百分比尺寸和位置

按百分比制作内容概览

除了使用页面尺寸外,您还可以使用百分比值(而非像素)指定元素的尺寸和位置。利用百分比值的方式可使元素相对于父级容器的尺寸和对齐方式保持不变,即使父级容器发生变化也是如此。

当您对齐元素时,如果选择对齐和分布工具浮动版式选项,可轻松设置百分比位置。

媒体规则

针对不同方向和尺寸覆盖属性和 CSS 样式

借助媒体规则,您的文档可以检测视口尺寸和方向,并相应地应用不同的样式和属性。例如,手机可能会将某些内容显示在单列中,而平板电脑则可能会将这些内容显示在两列中。系统会针对指定尺寸或尺寸范围进行这些更改(称为覆盖)。

“自适应”面板中,您可以在不同的规则集之间进行切换:

  • 默认规则:更改默认样式集时,或进行会应用于所有视口尺寸的更改时(例如添加或删除素材资源、组件或事件时),请选择修改基本文档
  • 媒体规则:选择特定尺寸或尺寸范围,可针对相应视口尺寸覆盖默认样式和属性。

选定媒体规则后,您可以设置仅适用于该尺寸或尺寸范围的样式和属性。例如,您可以调整元素的位置、尺寸、来源、可见性或动画。此外,Google Web Designer 还允许您覆盖文字内容、文字调整设置以及组件属性。

详细了解媒体规则和覆盖设置

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

需要更多帮助?

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

搜索
清除搜索查询
关闭搜索框
Google 应用
主菜单
搜索支持中心
true
5050422
false