CSS“em”问题：避免缩小到特定元素的字体大小 [英] CSS "em" issue: avoid scalling to font-size of specific element

问题描述

我的网站几乎完全是以em（而不是px）来设计的。它应该是现代浏览器更好。

大部分文本是font-size：1em。 1em = 16px默认情况下，我没有指定它。

但是我有一些内容的字体大小为1.2em和其他0.8em（例如H1或小按钮）。

与em相关的问题是它重新缩放元素的所有大小（margin，padding，height ...）根据字体大小。

我有我的CSS中的具体代码：

  / *重置* / 
 html [和许多其他元素] {
 font-size：100％; 
字体：继承; 
} 
 / * Design * / 
 body {
 font-size：1em; 
 line-height：1; / *线高将等于每个元素的em * / 
} 
 .small-button {
 font-size：0.8em; 
 margin-left：1em; 
} 
 .normal-button {
 font-size：1em; 
 margin-left：1em; 
 
 
 
 $ b $正常按钮的边距为1x1x16 = 16px。但小按钮的边距为1x0.8x16 = 12.8px。
 
显然这是一个特定的em属性（在px中不会出现这种情况），它根据元素的字体大小来缩放一切。
 
 
 
这个例子很简单，但在我的网站上，这让事情真的很难保持一致。
 
 
 
如何取消激活此属性，以便在上面的示例中，2个按钮具有相同的边际？ （没有重新计算大小，这是我现在正在做的！）
 
解决方案
这是em单位，它是相对于当前设置的字体大小。如果你想使用一致的形式，使用单位rem。这是相对于你的网页的根元素（很可能是你的HTML标签），并代表根EM。
 
 
看看这篇文章由乔纳森Snook如果你想学习更多关于它。 
  http://snook.ca/archives/html_and_css/font-size -with-rem  
 
My site is almost totally designed in "em" (as opposed to px). It is supposed to be much better for modern browsers.

Most of the text is font-size:1em. 1em = 16px by default, I didn't specify it.

But I have some content where font-size is 1.2em and other which is 0.8em (for example for H1 or for small buttons).

The issue with "em" is that it re-scale all the sizes of an element (margin, padding, height...) according to the font-size.

I have the specific code in my CSS:
/* Reset */
html [and many other elements] {
    font-size: 100%;
    font: inherit;
}
/* Design */
body {
    font-size: 1em;
    line-height: 1; /* Line height will equal the em of each element */
}
.small-button {
    font-size: 0.8em;
    margin-left: 1em;
}
.normal-button {
    font-size: 1em;
    margin-left: 1em;
}
The normal-button has a margin of 1x1x16 = 16px. But the small-button has a margin of 1x0.8x16 = 12.8px.

Apparently this is a specific "em" property (it would not be the case in "px") which scales everything according to the font-size of the element.

This example is simple; but on my website it makes things really hard for me to keep things consistent.

How can I de-activate this property so that in the example above the 2 buttons have the same margin ? (without re-calculating the sizes; which is what I am doing right now!)
解决方案
It is the purpose of the em unit that it is relative to the currently set font size. If you want to use an consistent form of em, use the unit 'rem'. It is relative to the root element of your page (most likely your html tag) and stands for root em.

Check out this article by Jonathan Snook if you want to learn more about it. 
http://snook.ca/archives/html_and_css/font-size-with-rem

                        
这篇关于CSS“em”问题：避免缩小到特定元素的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！