响应式布局
WebAcappella 可创建自适应网站，能够自动适应不同尺寸的屏幕：电脑、平板和手机。
该软件采用基于框、行和列的模块化系统。
理解响应式模式
- 响应式网站必须在保持可读性和易用性的前提下实现自适应。
- WebAcappella 包含多个断点，可根据屏幕尺寸调整布局。
- 主要提供三种显示模式：
✔ 桌面模式：大屏幕显示（PC、Mac）。
✔ 平板模式：适应中等尺寸屏幕。
✔ 移动模式：针对智能手机进行优化。
访问屏幕选项
- 在工作区上方找到对应不同屏幕尺寸的图标。
- 点击图标即可随时查看网站预览。
响应式属性
- 某些属性可根据显示模式（台式机、平板电脑、手机）进行调整。
- 当某项设置可针对特定屏幕进行修改时，参数旁边会显示响应式模式图标。
启用这些选项后，每种显示模式将拥有独立设置，互不影响。
另一个使用示例：调整字体大小。过大的文本在移动设备上可能难以阅读。
调整列宽
每行包含一个或多个列，列宽在 1 到 12 个单位之间变化。
按住 Option 键（Mac）/ Alt 键（Windows）激活列模式，可更轻松地选择列。
选中某列后，您可以：
- 移动该列以重新组织结构。
- 调整其大小以适应行内空间。
- 使用流体布局：列会根据屏幕自动重新排列。
- 检查列尺寸调整：必须进行调整，以避免在移动设备上显示过密。
级联模式：将元素堆叠在列中
级联模式可强制将特定屏幕上列中的元素垂直堆叠。
该模式在移动设备上尤为实用，可避免水平布局过密，提高可读性。
- 选择一行。
- 进入行参数设置（右侧面板）。
- 为当前选定的屏幕激活“级联”模式。
- 每列中的元素将自动垂直堆叠。
使用“断行”强制换行
断行元素可强制某行在给定屏幕上位于前一行下方。此设置将继承到较小尺寸的屏幕上，确保内容更好地适应屏幕。
- 必须先选择一行。
- 打开元素工具栏。
- 选择“断行”元素。
- 将断行拖放到需要强制换行的行中。
⚠ 插入行中的断行符将在该屏幕及以下尺寸中生效。
根据屏幕隐藏元素
如果某个元素对于小屏幕而言过于复杂，则可以根据屏幕尺寸将其隐藏。
- 选择一个元素。
- 进入可见性选项（在右侧属性中）。
- 勾选或取消勾选选项，以在桌面、平板或移动设备上显示或隐藏该元素。
测试并最终确定显示效果
- 定期切换至移动模式以检查显示效果。
- 调整边距和间距，避免元素过于密集。
- 使用预览功能（Cmd + T / Ctrl + T）查看实际效果。
最佳实践
- 使用灵活的列结构以获得更好的适应性。
- 在某些行上启用级联模式，以避免在移动设备上出现元素对齐不当的情况。
- 如果某行内容在特定屏幕尺寸下需要置于其他行下方，请使用换行符。
- 发布前测试每种显示模式。
- 优化图像和文本，确保在所有屏幕上都能清晰显示。