您可以使用Webflow内置的响应式断点(也称为媒体查询)为不同的屏幕尺寸定制站点设计。加载站点时,默认的断点是桌面视图,但还有6个额外的断点。
在这节课中:
- 在不同的断点上设置样式
- 增加更大的断点
- 扩展画布
- 重写断点上的样式
- 结算方式
- 测试响应性和流动性
在不同的断点上设置样式
风格的变化可以上下级联(双向级联)。他们的级联向上从992px(桌面)开始下来从桌面到移动端。这意味着在桌面、1280px、1440px和1920px上应用的样式会层叠到更大的设备上,而在桌面断点上设置的样式会层叠到更大的设备上,并应用到平板电脑和两种移动设备上。在平板电脑上设置的所有样式都将转移到移动断点。可以覆盖从更高的断点继承的任何样式。
这种级联特性适用于文本样式,除非覆盖样式。您可以使用断点定制小屏幕和大屏幕的设计。
切换断点
控件在不同的断点之间切换,无论您处于设计模式还是预览模式设备图标位于顶部酒吧的设计师。
你也可以调整Designer画布的大小,以预览站点的响应性在不同的设备上。
在调整画布的大小时,您可以看到哪些设备位于当前画布宽度之下。
确定风格继承
样式可以通过两种不同的方式获得其价值:
- 它设置在一个特定的断点上
- 它继承自级联断点
例如,移动断点上的样式可以来自移动断点,也可以来自级联下来的平板电脑断点上的更改。可以看到样式的继承风格的面板通过单击样式属性旁边的蓝色或橙色标签和图标。
增加更大的断点
我们生活在一个各种电子产品都可以访问网站的世界——台式电脑、平板电脑、大手机、小手机,甚至智能手表。每一个都有不同的视口大小——不同的屏幕大小——来查看网页内容。你的网站布局应该通过使用断点来响应这些视图。断点是屏幕宽度,您的布局将在此改变以适应新的视口。
例如,在Webflow画布中,平板电脑断点的宽度为768像素。当有人在宽度为769像素的屏幕上访问您的网站时,您的网站将在设计器中的桌面断点(下一个比平板电脑断点大的断点)处显示。然而,一旦某人的屏幕是768像素宽(但仍然大于568像素宽,这是下一个较小的断点),你的网站将显示在设计器中的平板电脑断点。
在设计时使用断点可以确保您的网站访问者有最好的体验任何屏幕大小。
Webflow有4个预设断点:
- 桌面
- 平板电脑
- 移动的风景
- 移动画像
您还可以选择添加3个更大的断点:
- 1280 px
- 1440 px
- 1920 px
要添加断点,单击断点下拉菜单(在顶部工具栏中桌面图标的左侧)并从下拉菜单中进行选择。
重要的是:在将较大的断点添加到站点后,您将无法删除它。
您添加的断点将显示在顶部栏中并自动被选中。虽然不能从顶部UI栏中删除较大的断点,但可以通过切换到该断点并点击来消除附加到该断点的所有惟一样式选项+点击(Mac)或Alt+点击(Windows)上的样式,它们的标签是蓝色的,这表明它们为这个特定的设备设置了样式。
扩展画布
如果您在笔记本电脑上进行设计,或者如果浏览器的视口比某些较大的断点窄,那么画布将自动缩小。
您还可以从下拉菜单中手动在画布设置中输入值。