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

Question

我听说相对单位比绝对单位好，但有时浏览器会将其舍入错误并且很难计算。你知道任何可以提供帮助的工具吗？

我使用了 SASS/指南针。这很好而且很容易，但并不完美……</p>

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;
}