web框架性能基准_将Web类型设置为基准网格

最新推荐文章于 2021-07-31 04:15:44 发布

daique1908

最新推荐文章于 2021-07-31 04:15:44 发布

阅读量220

点赞数

文章标签： python java css 人工智能大数据

web框架性能基准

网页设计本质上只是印刷术发展过程中产生的原理和理论的发展。设计行业为Web带来了很多技术，但是有些技术需要花费更长的时间才能在虚拟环境中掌握。不幸的是，我们没有一个单一的平台来展示我们的内容。我们必须与多种浏览器，操作系统和屏幕尺寸作斗争。

随着网络的发展，我们遵循的设计原则也随之发展。近年来，基于网格的设计有所增加，因此设计人员可以根据圆柱状网格来布局自己的站点。网格系统是一种非常流行的方法，可以通过应用比例和平衡来组织和对齐元素，以及向页面添加一般顺序。

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

什么是基线网格？

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

正如我之前所说，打印是一种静态介质。通过设计打印格式，您可以指定所有查看者将看到的内容。但是，由于可以在Web上解释您的设计的备用平台，因此CSS不可避免地会针对不同的用户以不同的方式呈现行高和其他印刷值。对于许多设计师来说，这只是猜测，并且可以预测最终用户将看到什么。

打印中的基准网格

无论是InDesign还是其他，许多印刷设计师都将基线网格与他们的设计套件结合使用。印刷网格可以追溯到1200年代初期，不仅限于网页设计。实际上，从网格到黄金分割的所有内容（即，大多数基于数学的理论）在生活的其他方面（尤其是建筑）都是共享的。

网格使将设计的所有元素（字体，摄影，绘画和色彩）相互之间形成正式关系成为可能；也就是说，网格系统是将订单引入设计的一种手段。与随机放置的广告相比，精心设计的设计具有更清晰，更整齐的布局和更成功的效果。 -约瑟夫·穆勒·布罗克曼

创建基线网格

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

首先，我们必须根据字体大小的比率为基线网格定义行高；在此示例中，1：1.5是一个不错的金额，可为我们提供50％的领先优势。如果我们的文字大小为12px，则行高（使用此1：1.5比例）将为18px。 150％是一个不错的数目，可为我们提供易于阅读的设计，但该值可以不同。但是，在考虑行高时，应尝试将其保持在130％-160％的范围内。

在继续之前，您应该确切了解CSS line-height属性的实际工作方式。行高是文本行的整体高度，而不是文本本身。它通过在文本上方和下方添加填充以使其间隔开来工作。如果我们实际上将一些文本放在规则的背景上，我们会看到文本位于行之间，而不一定位于行之间。

进入CSS

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

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

段落

首先，设置好行高后，我们需要在每个标题和段落下方插入一个一致的边距。由于我们在这里使用的是15px的网格，因此我们通过覆盖段落标记的标准底部边距（默认情况下为1em，在这种情况下为10px）来开始工作，以与我们在文本。如果文本位于此处，则会在每个段落下方创建一个等于高度的空行。

p {
	margin-bottom: 15px;
}

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

标头

同样，对于标头，我们只需要继续服从15像素的增量即可。通过简单地在边距上标记150％的行高，我们可以创建类似的一致中断。

h1 {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 15px;
}

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

在继续进行之前，我确实要注意，如果您在背景上加上了文字，您的文字可能并不总是排在一行。不过，只要行高保持不变，也不要担心。如果您的文字浮在行的中间，则可以轻松地使用边距，但这不是必需的。

清单

接下来，我们如何处理列表？首先，我们希望以与我们对段落相同的方式来应用我们的标准边距。这使休息与内容保持一定程度的一致性。

ul, ol {
	margin-bottom: 15px;
}

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

由于我们的行高是在父元素CSS中定义的，因此我们只需定义边距就可以使列表在基线网格系统中正常运行。

图片

图像开始变得有些困难。最好，我们希望在页边空白处具有相同的一致性，因此，对图像的处理方式与对待文本块一样。这确实意味着您需要将图像的大小调整为线条高度值的倍数，在本例中为15。

在我的示例中，图像浮动在右侧，因此在左侧和底部应用了15px的边距。除了该段落下方现有的边距之外，这还使我们获得了与其余基线网格相等的一致边距。

img.left {
	float: left;
	margin: 0 0 15px 15px;
}

当然，这些并不是我们需要修改以符合新基准网格的唯一元素。关键是要确保您以一致的增量工作，因此所有内容都限于同一网格。当与大文本一起使用时，这可能导致整个页面上的和谐与平衡变得明显。

我们的例子

这是我们完成的示例，一个简单的网页，其中包含段落，标题，图像和列表。如果您想拿出尺子，可以，但是我可以向您保证，所有内容都遵循基于我们印刷术的一致网格。

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

结论

基线网格是为排版增加一些平衡和比例的好方法。这是可以在您的设计中增加一些自然感觉的那些微妙的实现之一。在基线网格的情况下，我们的版式变得与标准间距保持一致，从而给人以和谐的感觉。

但是，不幸的是，我们仍然必须克服浏览器不兼容的威胁，这可能会使我们CSS在不同用户在备用浏览器，操作系统或设备上浏览时为不同用户呈现不同的呈现方式。尽管添加基线网格确实提供了其他优势，但这项任务似乎还没有完成。例如，这种网格系统在缩放时可以提供极大帮助，因此，迫使浏览器重新呈现其CSS。基线网格为浏览器提供了更多的灵活性和鼓励，使其能够正确执行操作。

这是一篇比平时篇幅短的文章，但这是因为基线网格实际上没有太多要说明或显示如何使用的方法。真正的魔力在于设计师进行调整和测试以确保其基线网格正常工作，并且最重要的是，使设计在视觉上更具吸引力（更多）。有关其他事情，请阅读有关此主题的A List Apart的文章。直到下一次，快乐的设计！