跳到主要内容

响应式布局

响应式布局确保页面在不同屏幕尺寸下都能获得良好的显示效果。

响应式断点

编辑器支持以下设备尺寸的预览与适配:

  • 桌面端:≥ 1200px
  • 平板端:768px - 1199px
  • 手机端:< 768px

响应式设置

断点特定样式

每个容器和部件都支持为不同断点单独设置样式,包括:

  • 显示/隐藏
  • 宽度与高度
  • 内边距与外边距
  • 排列方向
  • 字体大小

使用建议

  1. 优先设计桌面端布局,再逐级向下适配
  2. 在手机端可考虑隐藏部分非关键内容
  3. 使用弹性布局让容器自动适应屏幕宽度
  4. 注意图片等媒体资源在移动端的缩放

通过顶部工具栏的响应式切换按钮,可实时预览不同设备下的页面效果。