Skip to Content
UI 搭建断点

断点

在响应式网页设计中,断点是指预先设定的一系列特定屏幕宽度临界值。当浏览器或设备的视口宽度跨越这些临界值时,网页的布局和样式会自动调整,以适应从手机、平板到桌面电脑等不同尺寸的屏幕,从而为用户提供在各种设备上都一致且优化的视觉与交互体验。

价值

  • 提升用户体验:响应式设计让用户在不同设备上都能获得一致且优化的视觉与交互体验。
  • 提高开发效率:通过预设断点,开发者可以快速调整布局和样式,而无需手动测试不同设备。
  • 优化SEO:响应式设计有助于提高网站在搜索引擎中的排名,因为搜索引擎更喜欢能够适应不同设备和屏幕尺寸的网站。

断点设置

断点范围

Zion 平台内置了一套标准的断点,以帮助您的应用适配主流的设备屏幕。以下是最新版本设置的断点及其对应的屏幕宽度范围:

断点名称宽度范围 (像素)
桌面 (Desktop)1280px - 1920px
平板 (Tablet)768px - 1279px
手机 (Phone)0px - 767px

主断点

网页端项目的主断点是桌面 (Desktop)。小程序项目的断点只有手机 (Phone)。遵循继承的原则,主断点上的修改会自动同步到其它断点。 在非主断点上支持复写,即在非断点上可以对组件进行独立的编辑,编辑后不会同步到其它断点。

目前支持复写的设计配置包括:位置、尺寸、样式、布局。

💡
如果希望某个组件在特定的断点中不显示,可以在该断点中隐藏该组件,不需要删除该组件。

hide_component_zion

Last updated on