断点(breakpoint)

2分钟了解 Creght 的断点,实现网页响应式布局

系统默认提供的断点如下图所示,可以满足大部分网站,实现响应式布局

手机下 纵向布局

断点的作用  - 改变布局

PC 上有更大的显示空间,所以内容通常会横向排列,但是手机上由于横向空间更小,所以通常内容是纵向排列,要实现这个效果可以给容器组件(Frame)设置不同的 “方向” 来实现:

PC 设置:

手机设置:

断点的作用:改变组件变形

在制作网站时我们一般会将导航封装成一个组件,这是因为导航会在多个页面之间共用。同时如果我们想在手机上和 PC 上分别制作不同的导航时,我们可以为导航组件制作两个不同的变形,然后再 手机下选择对于的变形。

假如我们已经做好了拥有两个变形的组件:

(你可以在插入面板 - 头部 找到这个导航组件模板)

然后在 手机 断点下选择这个 mobile 变形即可:然后在 手机 断点下选择这个 mobile 变形即可:

断点的作用:改变样式

比如文字大小、容器组件的边框、间距等等

添加断点

断点规则

在站点下的一个页面修改了断点的宽度,当前站点的其他页面同步修改

如下图所示,选中PC断点,在右侧即可调整断点的宽度。