Question

我的保证金应该是20px。如何将其转换为ems？元素的字体大小是1.08em。 1 em = 13px。

我认为将30除以13会起作用，但这似乎不适用。

这是CSS：

.test {
   margin-bottom: 30px;
   font-size: 1.23em;
}

我需要将30px转换为ems。

Answer 1

将body，html字体大小设置为62.5％，然后设置为16px = 1em。数学变得很容易以这个比例工作。

以下是对原因的解释。 Css 62.5% why do developers use it?

Answer 2

我有一个黄金法则，我在大多数项目中使用它非常容易和简单。

大多数浏览器都支持16px，因此我将我的主体和html定义为100％，因此计算起来很容易。

示例：

    //Golden Rule:  
    //100% = 16px  browsers default
    //21px ÷ 16px = 1.5em


html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    color:#565a5c;
    font: normal normal 100%/1.5em "MyriadPro", "FontAwesome";
    padding-top: 50px;
    padding-bottom: 20px;

}

更多样本：

h1 {
  font-size: 2em; /* 32px ÷ 16px */
  line-height: 1.3125em; /* 42px ÷ 32px */
  margin-bottom: .5em; /* 16px ÷ 32px */
}

h2 {
  font-weight: 400;
  font-size: 1.75em; /* 28px ÷ 16px */
  line-height: 1.285714286em; /* 36px ÷ 28px */
  color: $hc;
  margin-bottom: .785714286em; /* 22px ÷ 28px */
}

30px将= = 1.875em

我希望这对你有所帮助。

Answer 3

我认为你走在正确的轨道上。 Ems是通过将em值乘以当前元素的继承字体大小来计算的。如果我理解正确，现在元素的字体大小是14.04px，对吧？（13px X 1.08）。

使用相同的逻辑，你可以将20px（你的目标边距）除以基本字体大小（13px），这将给你1.538 ......你可以向上舍入到1.54em，你将获得20.02px。

这有用吗？

将像素转换为ems以获得边距和填充

3 个答案: