html - 了解响应式设计的 px 到 em 到百分比

Question

所以我遇到了一些转换数学 Target ÷ Context = Result Target 将 px 转换为 em 百分比。

我知道这可以让您的布局保持流畅。我不明白的是将什么插入方程式。我是否在我通常会使用像素大小的所有东西上使用它？谁能启发我使用它进行转换和设计的正确方法？谢谢

Answer 1

您可以在 A List Apart 上找到有关该公式的更多信息

  target ÷ context = result

If we assume the body’s default type size to be 16px, we can plug each desired font-size value into this formula. So to properly match our header to the comp, we divide the target value (24px) by the font-size of its container (16px):

  24 ÷ 16 = 1.5

So the header is 1.5 times the default body size, or 1.5em, which we can plug directly into our stylesheet.

   h1 {
     font-family: Georgia, serif;
     font-size: 1.5em;        /* 24px / 16px = 1.5em */
   }

在处理文本时，em 和 % 几乎是等价的:
100% == 1em
50% == 0.5em

在设计网格时，我会直接考虑百分比(或列)而不是手动进行转换。