回所有课程
课程库

风格在断点

添加和改变风格,确定风格继承,和清晰的风格在设计师使用断点。

这个视频老UI特性。更新版本即将到来!

设置一个断点上的样式,如桌面,可以影响其他断点值。这些风格值级联通过不同的断点——改变桌面级联到平板电脑,移动景观和移动画像。同样,修改其他的断点会级联。

这个级联自然适用于所有样式(如元素标签样式层叠到类)除非覆盖一个样式。这是最好的例子了。

在这节课中
  1. 添加和改变风格
  2. 确定风格继承
  3. 明确的风格

添加和改变风格

只要你添加或更改样式的元素标签在一个断点,变化将级联到较小的断点。

添加或改变任何断点风格:

  1. 点击中间的设备图标栏顶部的设计师
  2. 选择您想要的元素的风格,如果你还没有了
  3. 添加或更改样式的风格的面板

添加样式

演示如何添加样式会级联样式,我们将使用三个按钮的一个例子并排坐在一节。

修复按钮跑到对方在移动景观断点,我们每个按钮的设置显示设置阻止他们垂直堆栈,添加了一些底部边距创造空间。这些变化将级联移动画像。

改变风格

改变值也会级联到较小的断点。如果我们回到桌面和改变填充和设置背景颜色为绿色,我们可以看到,这些变化级联通过所有四个断点。

覆盖方式

你随时可以覆盖这些层叠样式断点通过改变值在特定的断点。

平板断点,我们改变背景颜色,紫色。回到桌面断点,在背景不变。然而,两个移动断点显示最新更新的紫色的背景颜色。这是因为样式级联下来通过断点,但不是。

确定风格继承

当你去任何断点,你可以确定风格从何而来。它可以来自一个风格在同一断点或更高的断点。你可以看到一个风格的继承风格的面板通过单击蓝色或橙色标签和图标样式属性。

明确的风格

可以明确一套样式值随时通过单击蓝色或粉红色指示器(文字或图标旁边的标签风格)和选择消除这种风格。你还可以保存选项/ alt在键盘和点击指标快速删除它。

如果我们有一个风格在平板倾泻下来的断点,移动断点、清算,风格在平板电脑将使移动断点继承样式从桌面。

尝试Webflow——它是免费的
Baidu
map