2分钟了解 Creght 的断点,实现网页响应式布局
系统默认提供的断点如下图所示,可以满足大部分网站,实现响应式布局
PC 上有更大的显示空间,所以内容通常会横向排列,但是手机上由于横向空间更小,所以通常内容是纵向排列,要实现这个效果可以给容器组件(Frame)设置不同的 “方向” 来实现:
PC 设置:
手机设置:
在制作网站时我们一般会将导航封装成一个组件,这是因为导航会在多个页面之间共用。同时如果我们想在手机上和 PC 上分别制作不同的导航时,我们可以为导航组件制作两个不同的变形,然后再 手机下选择对于的变形。
假如我们已经做好了拥有两个变形的组件:
(你可以在插入面板 - 头部 找到这个导航组件模板)
然后在 手机 断点下选择这个 mobile 变形即可:然后在 手机 断点下选择这个 mobile 变形即可:
比如文字大小、容器组件的边框、间距等等
在站点下的一个页面修改了断点的宽度,当前站点的其他页面同步修改
如下图所示,选中PC断点,在右侧即可调整断点的宽度。