稳定垂直文本节奏的最佳方法是什么？

Question

我听说相对单位比绝对单位更好，但有时候浏览器错误地计算并且难以计算。你知道任何有用的工具吗？

我使用了SASS / Compass。这很好，也很容易，但并不完美...

Answer 1

根据评论，“垂直文本节奏”似乎是指线网格。在CSS中通常忽略行网格，主要是因为它主要与打印介质和多列文本布局相关。基本上，使物体捕捉到线网格的方法是使用相同的单位在垂直方向上使用一致的大小。例如，如果以em为单位设置线高，也可以设置这些单位的高度和垂直边距。要使图像适合线条网格，请将其包装在高度为em单位的容器中。或者，以px为单位执行所有垂直大小调整。

确实，舍入可能会导致问题，因为em尺寸的东西最终会被转换为像素。因此，如果将行高设置为1.3em并将图像容器高度设置为3.9em，则后者可能不会产生前者的3倍像素，但会减少一个像素。如果这是至关重要的并且您考虑使用像素，请记住CSS像素无需与设备中的物理像素相对应。

在CSS Line Grid Module中，目前仅作为编辑草稿存在，有使用实线网格的属性。它们已在Chrome中部分实施，前缀为-webkit-。如果需要一个行网格，添加尝试将内容捕捉到网格中的代码几乎不会受到影响，并且可以在Chrome中执行此操作：

body {
  line-grid: yourNameForLineGrid;
  line-snap: baseline;
  -webkit-line-grid: yourNameForLineGrid;
  -webkit-line-snap: baseline;
}