我正在与使用 EM 而不是 PX 的 Zurb Foundation (v4) 合作。
我发现使用 EM 的一个缺点是元素的边距由 $column-gutter 设置（例如 0.9375em）如果元素的字体大小不是 1em（例如 0.875em），则该元素的边距更小（因为 ems 是相对于字体大小的）而不是其字体大小为 1em 的元素。
因此，如果我将 2 个元素彼此相邻，则两者的实际边距结果是不一致的。即使元素的字体大小不同，我也真的想保持元素的边距一致。有没有一种聪明的方法来实现这一点（不使用 px）？
您可以使用 unit rem，它类似于em但相对于根元素 ( html) 的字体大小。
不幸的是，它不适用于 IE8 或更低版本。但是它有一个Polyfill。
EM 值始终是父字体大小的倍数。
例如，如果元素的 font-size 为 0.875em ，则该元素的边距将乘以 0.875。Foundation 4 中的基本字体大小为 16px，因此上述元素的字体大小将为 0.875*16 = 14px。边距设置为 0.9375em，在本例中为 0.9375*16*0.875=13.125px。
如果你想要一个 15px 的边距，要么总是将它除以父字体大小（在示例中除以 0.875，所以使用 (0.9375/0.875)EM 而不是 0.9375EM），或者使用相对于基本字体大小的 REM （在 Foundation 4 中为 16px），因此您不必处理父级的字体大小。
如果 HTML 层次结构中有更多父元素，则需要尊重所有这些元素。