自适应版式概述

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

自适应页面尺寸

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

新文件

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

现有文档

自适应面板中,选中自适应版式复选框。

百分比尺寸和位置

按百分比制作内容概览

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

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

用于替换 CSS 样式的媒体规则

通过利用媒体规则,您的文档可以检测视口尺寸和方向,并相应地应用不同的样式。例如,手机可能会将某些内容显示在单列中,而平板电脑则可能会将这些内容显示在两列中。这些样式更改称为替换,适用于指定的尺寸或尺寸范围。

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

  • 默认规则:更改默认样式集时,或进行适用于所有视口尺寸的更改时(例如添加或删除素材资源、组件或事件时),请选择修改默认规则
  • 媒体规则:选择特定的尺寸或尺寸范围,可替换相应视口尺寸的默认样式。

选择媒体规则后,您可以设置仅适用于该尺寸或尺寸范围的样式。例如,您可以调整元素的位置、尺寸、来源、可见性或动画。

详细了解媒体规则和样式替换

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

需要更多帮助?

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