响应样式

开始

让＇让我们仔细看看响应式样式是如何实现到UI中的。我们＇我将从一个以a为中心的简单例子开始按钮元素:

这里我们有一个带底座的按钮字体大小的32像素，您可以在屏幕左侧的工作区中看到。除此之外，您可能已经注意到工具栏有轻微的变化- - - - - -更新后的”预览大小,”这在几个关键方面发生了变化:

• 向左的断点切换现在在工具栏中任何时候都是永久可见的(而不是在单击切换时出现在弹出窗口中)，允许对预览区域进行快速更新＇S的大小。
• 的px/％值右侧显示有关实时预览区域的实时信息。目前，这个现场预览区是坐在1120 px宽，可缩放到100％(预览缩放是这个发布周期的一个新特性，我们将在后面详细介绍)。这两个值都是输入，这意味着您可以在任意一侧输入特定的值，以根据您的具体规格调整实时预览的大小。

如果您喜欢在屏幕的左边或右边使用工具栏，断点切换将保留在工具栏中，而预览大小/比例输入将显示为实时预览角落的一个小弹出框(角落可以在您的首选项中指定):

缩放预览

在进入下面发现的所有响应性乐趣之前，让＇让我们花点时间讨论一下预览缩放。这次更新包括实时数据的添加，因为它属于现场预览:

当您的浏览器调整大小(或您拖动在现场预览两侧找到的手柄)时px在此部分中发现的值将实时更新，为您的实时预览的宽度提供即时反馈。这对于寻找特定宽度的目标以更好地了解特定设备上的内容是非常有用的。

然而,这取决于你的设备有多大＇重新设计，你可能会遇到一个问题，就像你在我们之前的一些图片中看到的。即使基石占据了整个电脑屏幕，我们也只能看到LG断点的一部分，因为侧工作区正在切割我们的实时预览。在较小的笔记本电脑上，甚至可能是MD设备切换显示为最大的可视断点。

为了补救这一点，我们＇我们使实时预览可伸缩，允许用户在较小的设备上缩小观看”超大”设计更小的屏幕。例如，注意在这个设备上选择XL断点时会发生什么:

你＇我将看到现场预览已调整大小为1200 pxWide，这是断点开始时的最小值;然而，这个设备只能看到1120 px工作区设置在屏幕的一侧，正如你从之前的截图中看到的那样。

So how is this all working? We use some simple calculations to apply a scaling变换到整个现场预览通过分”实际”预览区域宽度按所需宽度(例如:1120 px/1200 px在这种情况下)。这就得到了一个比例因子93.33%，在这个实例中自动应用，允许我们看到所有1200 px的物理空间内1120 px．

如果单击工具栏中的一个断点切换，所有这些都将自动完成或如果你手动输入px值在输入本身中。例如，如果你想看看你的网站看起来如何1600 px，简单地输入1600输入会自动应用一个比例因子70％为了确保所有这些都适合你的视口:

但是，如果您想查看1600 px在100％规模?你所需要做的就是将你的比例重置为100％，现在你可以在预览区域内水平滚动查看所有内容1600 px在100％规模:

管理预览缩放功能有几个关键要点:

• 任何时候你手动输入px价值至上％比例将自动更新，以便您输入的整个值可以在实时预览中看到。
• 一旦你进入一个px值，如果你想调整刻度和保存px宽度，更新％规模可以让你独立完成。

这也可以在相反方向，也许你在做一些细节工作，而你＇我希望能看到什么＇S更清楚了。在这种情况下，您可以输入一个更大的刻度％为了更仔细地观察事物:

基本断点

当您开始处理内容时，在工作区中所做的更改将应用到您的基地断点。应用到基本断点的样式将在整个设计中自动级联，除非稍后应用响应式覆盖。基本断点由工具栏中任何一个设备图标的左上角的一个点表示:

默认情况下，XL断点被设置为基础，但如果您愿意，可以通过转到更改此设置主题的选择 →布局＆设计 →断点:

根据您使用的设备，您甚至可能希望将Base Breakpoint设置为介于两者之间的值。例如，如果你的主计算机在基石中默认为LG断点，你可能希望将你的基础断点设置为LG，并让你的样式起源于这个断点。

将响应

通过单击任何有效控件的侧面标签，可以对其引入响应式覆盖。任何有效控件的标签将在悬停时突出显示，表明它可以进行相应的调整。作为练习，让＇S调整字体大小我们的例子按钮，它被设置为32像素从上面的截图来看:

单击标签时出现的下拉框是如何管理跨断点的响应式样式的。除了显示该控件的继承流之外，它还为每个断点显示您正在处理的控件的表示形式＇s值:

请注意箭头，它们用于帮助说明控制的继承流＇s值。我们可以看到的底值32像素这里的set实际上起源于XL断点。现在,让＇假设我们想要在MD断点上减小按钮的字体大小:

除了我们现在有两组正在进行的继承之外(正如我们的箭头组所演示的那样)，您还将注意到在设备图标上设置了一些新的颜色。这些颜色有助于表示每个断点上值的状态以及它的起源:

• 基地 - - - - - -指示您正在查看的断点正在从基本断点获取其值，或者本身就是基本断点值。
• 当前的 - - - - - -黄色表示查看的断点值为当前设置在那个断点上。这意味着它覆盖了基本值而且作为新基地值后面的任何断点。
• 继承了 - - - - - -蓝色标签告诉我们这个断点＇S值为继承了从它前面的断点开始不基本值。

这些颜色很重要，因为它们反映在Workspace标签上，一旦应用了响应式样式，就会提供上下文反馈。例如，现在我们已经在Button上启动了responsvie样式＇的“字体大小”，查看工作区LG或XL断点将显示灰色标签样式:

上查看工作区医学博士断点将在输入中显示黄色状态和更新后的值:

和查看工作区XS或SM断点将显示蓝色状态以及输入中的继承值:

注意:一旦在控件上启用了响应式样式，响应式样式就是总是积极用于任何断点上的该控件。这意味着您可以直接在工作区中对带有高亮显示标签的任何控件进行响应式编辑。记住这一点，以确保你不会＇不要在处理元素时意外地改变你的继承结构。

现在我们＇假设你决定不去＇i don’我不关心在MD断点上所做的更改，您想重新设置您的值，以便它再次从Base断点继承。你可以执行的一种方法是软复位从工作空间或响应式下拉菜单进入断点，在那里你应用了一个覆盖，并手动匹配它回到你的基础。

这可以很好地用于简单的值，如字体大小，但对于更复杂的输入，如颜色组合，复杂的布局，或长字符串(例如变换和过滤器)，的方法进行探索复位动作在响应式下拉菜单中。任何控制你＇Ve被覆盖可以通过将鼠标悬停在设备图标上显示此操作来重置为继承它的下一个可用断点:

将鼠标悬停在这些断点上时，您将注意到设备图标已替换为”重置”除了添加一个继承箭头，让你预览你的价值将从哪里来，如果你点击这个动作。如果您在每个断点都覆盖了值，这可能特别有用，因为如果您愿意，您可以快速移动继承结构并清除内容。

没有响应的控制

并非工作区中的所有控件都允许响应式覆盖。一些例子包括(但不限于):

• 任何形式的”内容”比如文本输入，图标选择器，图像等等。如果希望跨断点显示变量内容，请使用在断点期间隐藏控件下的定制而是控制模块。
• 与各种JavaScript或PHP功能相关的控件。
• 内联或特殊样式应用于某些元素部分，如高级背景，分隔符等。

博士TL;如果将鼠标悬停在标签上时该标签突出显示，则可以单击它并相应地调整它，否则.．.你可以＇t。

统治者

此版本中添加的另一个UI元素是统治者,什么时候出现在现场预览的底部边缘调整或当断点切换处于活动状态时。此外，当断点切换处于活动状态时，您将看到该断点＇S范围由标尺内的蓝色高亮表示。例如，如果你选择了SM断点，你会在标尺上看到以下突出显示:

选择断点切换将把实时预览的大小调整为下界媒体查询。在调整实时预览大小时，使用控件两侧的手柄iframe，你将能够快速在该范围的下限和上限之间移动，而不超过这些点:

这种机制的优点在于，它允许您在当前断点的上界和下界之间快速来回移动，使您有机会在断点的两个极端检查设计，而不必担心在调整大小时是否超级精确。

控制重新映射

控件标签状态指示器是在Cornerstone中使用响应式样式的一个重要部分，这意味着每个能够响应式样式的控件都需要自己的唯一标签，以便在必要时应用状态指示器。

因此，所有Element控件映射都被稍微打乱，以赋予每个控件自己的单独标签。这意味着要去掉一些以前的UI惯例，比如偶尔对一行有两个控件。例如，这是以前的迭代盒阴影控制:

这是它的更新布局，每个控件都在自己的行上:

在执行这些更新时，我们实际上发现，这通常有助于使事情更清楚，因为每个标签现在直接与一个控件相关联，消除了在一个空间中处理两个标签的需要。此外，由于每个控件都占据了容器的全部宽度，因此在可能的情况下，我们可以使用更多描述性标签(例如。”外”而且”内部”为不必而不是一组抽象的图标)。

在其他情况下，重新定位会更复杂一些。例如，在最近的更新中，元素的大小控制列,细胞,而且Div都被裹进了”设置”控制组和许多其他控件作为一个2x2网格。然而，一旦我们将这些控件划分为各自的行，控制组就会因为有太多的控件而感到非常忙碌(我们认为在特定组中有多少控件是可管理的，根据上下文有一个灵活的上限)。正因为如此，所有元素的大小控制被分解成一个新的大小组，你会发现在大多数元素的顶部:

属性的元素全球集装箱选项，如行和网格，我们能够将该选项工作到这个新的控制组中，以一种方式在整个工具中响应其他模式，如”汽车的位置”Cell元素的状态。在这些元素上，当全局容器被启用时(默认状态)，你会在Size控制组下面看到以下信息占位符:

取消选择控制组右上角的复选框(或单击消息本身)后，提示符将被替换为宽度而且最大宽度这些控件一直存在于这些元素上:

这种消息传递有助于更清楚地了解特定大小的来源，而不是将所有这些控件简单地塞到一个通用控件中”设置”组。

最后,我们＇在垂直方向上，我们已经为工作区中的顶级和子级别控件组包含了可折叠的控件组标题(水平模式显示传统的控件组)。例如，检查一个列在您的垂直工作区中可能看起来像下面这样:

注意顶部标题是如何与上面屏幕截图右下角的控件导航相匹配的。以前，在控制模块之间移动的唯一方法是转到导航栏并单击到一个新组(即从”影响”来”定制”)．当您现在处于垂直模式时，所有这些控制模块都在Workspace本身中可用，使您能够快速移动到其他模块，而不必遍历屏幕。这对于由许多不同的控制模块组成的多维元素(例如导航)特别有用。任何时候只能打开一个控制模块，因为其中一些模块在更复杂的元素中可能相当长。

另外,你＇你会注意到子组也是可折叠的，允许你在工作流程中快速隐藏或显示整个组。可以同时打开多个子组你可以CMD/Ctrl+点击任何子组都将迅速扩大或同时瓦解所有子组。

最后，在查看垂直工作区时，您将注意到预设管理器已被添加到它自己的部分中，并放置在列表的末尾，以帮助在检查元素时回收工作区的一些初始空间。随着控制模块标题的添加，当您需要这些预设的管理功能时，可以很容易地跳到列表的末尾。

视频

如果你＇我们更多的是视觉学习者＇我已经花了一些时间来讨论下面视频中讨论的所有内容.．.有空的时候去看看吧!