将Web类型设置为基准网格_极简慕枫

网页设计本质上只是印刷品发展过程中创造的原理和理论的演变。设计行业为网络带来了许多技术，但有些技术需要更长时间才能在虚拟环境中掌握。不幸的是，我们没有一个平台可以让我们的内容出现; 我们必须与多种浏览器，操作系统和屏幕尺寸进行斗争。

武汉高端网站建设

随着网络的发展，我们观察到的设计原则也是如此。基于网格的设计近年来有所增加，设计师可以根据圆柱网格布置他们的网站。网格系统是一种非常流行的方式，通过应用比例和平衡来组织和对齐元素，以及向页面添加常规顺序。

基于我们使用比例和平衡的知识，可以利用另一种印刷设计原则：基线网格。

什么是基线网格？

基线网格是一种用于改善基于网络的排版的技术。基本上，它将所有文本对齐到垂直网格，每个字母的底部都放在网格上，就像在皱纸上书写一样。最终的结果是一个完美组织的文本体，具有潜意识的平衡和一致性。

正如我之前所说，打印是一种静态媒介。设计打印格式允许您指定所有观看者将看到的内容。但是，由于可以在网络上解释您的设计的替代平台，您的CSS将不可避免地为不同的用户呈现不同的行高和其他印刷值。对于很多设计师来说，这只是猜测并预测最终用户会看到什么。

印刷中的基线网格

许多印刷设计师将基线网格与其设计套件结合使用，无论是InDesign还是其他。印刷中的网格可以追溯到12世纪初，并且不仅仅局限于网页设计。事实上，从网格到黄金比例（即大多数基于数学的理论）的所有内容都在生活的其他方面共享，尤其是建筑。

网格使得将设计的所有元素 - 字体，摄影，绘画和色彩 - 变为彼此的正式关系成为可能; 也就是说，网格系统是将订单引入设计的一种手段。故意组合的设计比随机放置的广告具有更清晰，更整齐的排列和更成功的效果。 - JosefMüllerBrockmann

创建基线网格

现在，我们来看看我们如何实际创建基线网格。

首先，我们必须根据与字体大小的比率为基线网格定义线高。对于这个例子，1：1.5是一个很好的数量，为我们提供了50％的领先优势。如果我们的文本大小为12px，则行高（使用此1：1.5比率）将为18px。150％是一个很好的数量，为我们提供了一个易于阅读的设计，但这个价值可能会有所不同。但是，在考虑线高时，应尽量保持在130％-160％的范围内。

在我们继续之前，你应该确切地知道CSS line-height属性是如何工作的。行高是文本行的总体高度，而不是文本本身。它的工作原理是在文本的上方和下方添加填充以将其填平。如果我们实际上取一些文本并将其放在一个统治的背景上，我们会看到文本位于行之间，而不是它们。

进入CSS

为简单起见，我们假设我们的文本的基本大小为10px。通过坚持我们的粗略比例，这意味着我们的线高将为15px，尽管我们可以改变这一点。（另请注意，10px非常小，在大多数情况下我不一定会推荐它，但我在这里使用它纯粹是为了让数学部门更容易）。为了使各种元素适合我们的基线网格系统，我们需要在CSS中进行设置。

然而，在我们继续之前，这些示例假设您正在使用某种CSS重置。如果不是，则默认边距可能会干扰我们今天所做的工作。

段落

为了解决问题，一旦我们设置了行高，我们需要在每个标题和段落下方放置一致的边距。由于我们在这里使用15px网格，我们通过覆盖段落标记的标准底部边距（默认情况下，这是1em，在这种情况下为10px）与我们的行高相同来解决问题。文本。这会在每个段落下方创建一个比例空行，如果文本位于那里，则等于高度。

这是结果：文本正文，其中段落下方的边距等于行高。

头

类似地，对于标题，我们只需要继续服从15像素的增量。通过简单地在我们的边距上标记150％线高，我们创建了一个类似的，一致的中断。

右边的示例应用了我们的CSS，这使得我们标题下的边距符合我们的基线网格。由于我们的标题的字体大小是普通文本的两倍，因此它在网格中占用两行。

在我进一步讨论之前，我想要注意的是，如果你已经将一个应用到你的背景中，那么你的文字可能并不总是真的就行了。不过不要担心，只要线高保持不变。如果你的文字漂浮在你的线条中间，你可以很容易地玩你的边缘，但没有必要。

清单

接下来，我们如何处理列表？首先，我们希望以与我们的段落相同的方式应用我们的标准保证金。这使得中断与内容保持一致。

现在开始变得容易了！如果您仍然在其他位置定义了15px的行高，则您的列表将与其余内容很好地匹配。

由于我们的行高是在父元素的CSS中定义的，因此我们只需定义边距即可在我们的基线网格系统中启动并运行列表。

图片

图像是它开始变得更加困难的地方。优选地，我们希望在边距中具有相同的一致性，因此图像的处理方式与它是文本块的方式相同。这确实意味着您的图像需要以行高值的倍数来确定大小，在本例中为15。

在我的示例中，我将图像浮动到右侧，因此我在左侧和底部应用了15px的边距。除了段落下方的现有保证金外，这也为我们提供了与基线网格其余部分相等的一致保证金。

当然，这些并不是我们需要修改以符合新基线网格的唯一元素。关键是要确保你在一致的增量内工作，所以一切都被限制在同一个网格中。当与大量文本一起使用时，这可以使整个网页中的和谐与平衡变得明显。

我们的例子

这是我们完成的示例，一个包含段落，标题，图像和列表的简单网页。如果你想要拿出你的尺子，你可以，但我可以向你保证，一切都遵循我们排版的一致网格。

我们只是打破了使用基线网格的表面。当你开始尝试将它们应用于更复杂的设计时，它会变得更加困难，最终很少在网络上使用它们。但是，这是可能的，并且可以产生平衡的，按比例的设计，可以有助于更好的最终用户体验。

结论

基线网格是为您的排版添加一些平衡和比例的好方法。这是一些微妙的实现，可以为您的设计增添一些自然的感觉。在基线网格的情况下，我们的排版与标准化间距保持一致，使其具有和谐的感觉。

然而，不幸的是，我们仍然必须抵御浏览器不兼容的威胁，这些威胁可能使我们的CSS在不同用户浏览其他浏览器，操作系统或设备时呈现不同的呈现方式。虽然添加基线网格确实提供了其他优势，但这项任务看起来似乎并没有出现。例如，这种类型的网格系统在缩放时可以提供极大的帮助，因此可以强制浏览器重新渲染它的CSS。基线网格为浏览器提供了更多的灵活性和鼓励，使其能够正常运行。

武汉高端网站建设这是一篇比平常更短的文章，但那是因为基线网格实际上并没有那么多解释或展示如何使用。当设计师进行调整和测试以确保他的基线网格工作时，真正的魔力就来了，最重要的是，使设计在视觉上更具吸引力（更多）。