将像素转换为ems的边距和填充

我有一个应该是20px的边距。我如何将其转换为ems？元素上的字体大小是1.08em。 1 em = 13px。将像素转换为ems的边距和填充

我以为将30除以13会有效，但似乎并不如此。

这里的CSS：

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

我需要将30像素转换为EMS。

来源

2016-04-28 J K

您需要20px的边距，因此您将30除以13？为什么30？顺便说一句，如果你真的发布相关代码（CSS + HTML），这将有所帮助。 – trincot

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

使用相同的逻辑，您可以将基础字体大小（13px）除以20px（您的目标边距），这会给您1.538 ...您可以将1.54em加到20.02px。

这是否行得通？

来源

2016-04-28 15:40:42 user3684918

设置正文，html字体大小为62.5％，然后16px = 1em。数学变得容易在这个比率下工作。

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

来源

2016-04-28 15:41:34 CZorio

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

大多数浏览器都有16px的标准，所以我定义了我的body和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

我希望这有助于你。

来源

2016-04-28 15:52:02 Raduken

将像素转换为ems的边距和填充

回答

相关问题