响应式布局

WebAcappella 可让您创建响应式网站，根据电脑、平板电脑和手机等不同屏幕尺寸自动调整。

该软件是一个基于方框、行和列的模块化系统。

了解响应模式

  • 响应式网站必须在不丧失可读性和人体工学的前提下进行调整。

  • WebAcappella 包含许多断点，可根据屏幕尺寸调整页面布局。

  • 可用的三种主要显示模式是 ：

    ✔ 桌面模式：在大屏幕上显示（PC、Mac）。

    ✔ 平板电脑模式：适应中间屏幕。

    ✔ 移动模式：针对智能手机进行优化。

访问屏幕选择

  1. 在工作台上方找到不同屏幕尺寸的图标。

  2. 点击图标可随时显示网站预览。

../../_images/pt_1_2.png

响应特性

  1. 某些属性可根据显示模式（台式机、平板电脑、手机）进行调整。

  2. 当可以修改特定屏幕的设置时，参数旁边会显示一个响应模式图标。

    ../../_images/pt_3_4.png

激活这些选项后，每种显示模式都有自己的设置，而不会影响其他模式。

另一个例子是调整字体大小。太大的文字在手机上很难阅读。

调整列的大小

每行有一列或多列，宽度从 1 个单位到 12 个单位不等。

按住 Option 键（Mac）/Alt 键（Windows）激活列模式，可以更轻松地选择列。

选中一列后，您可以 ：

  • 移动它来重组结构。

  • 调整其大小，以调整其在线条中的位置。

  • 使用流动布局：列会根据屏幕自动重新排列。

  • 检查列的大小调整：应调整列的大小，避免在移动设备上显示过于紧凑。

层叠模式：在一列中堆叠项目

级联模式允许您在指定屏幕上强制垂直堆叠列中包含的元素。

这在移动设备上尤其有用，可以避免过于紧凑的水平布局，提高可读性。

  1. 选择一行。

  2. 访问线路参数（右面板）。

  3. 激活当前所选屏幕的 "级联 "模式。

  • 每列中的项目会自动垂直堆叠。

    ../../_images/pt_5_7.png

使用 "换行 "强制换行

在特定屏幕上，Break 元素可用于强制某一行位于前一行的下方。在较小的屏幕上，这一设置会被继承，从而确保更好地适应内容。

  • 您需要选择一行。

  1. 打开元素工具栏。

  2. 选择 "中断 "元素。

../../_images/break_00.png

  1. 将换行符拖放到需要强制换行的行中。

⚠ 在一行中插入的分隔符将在此屏幕和更小的屏幕上激活。

../../_images/break_10.png

隐藏屏幕元素

如果某个元素对于小屏幕来说过于复杂，可以根据屏幕大小将其隐藏。

  1. 选择一个项目。

  2. 访问可见性选项（在右侧的属性中）。

  3. 选中或取消选中选项，以便在台式机、平板电脑或手机上显示或隐藏项目。

../../_images/masquage_00.png

测试并最终确定显示屏

  • 定期切换到移动模式检查渲染效果。

  • 调整页边距和间距，避免元素过于紧凑。

  • 使用预览（Cmd + T / Ctrl + T）查看真实情况下的渲染。

最佳做法

  • 使用灵活的立柱结构，提高适应性。

  • 在某些行上激活层叠模式，以避免移动设备上的元素错位。

  • 如果一行必须从给定画面的其他画面下方通过，则在该行中使用分隔符。

  • 在发布之前测试每种显示模式。

  • 优化图片和文字，确保它们在所有屏幕上都易于阅读。