css - 在CSS中设置字体大小时，为什么不将<body>设置为6.25%，使px和em单位相同？

我现在正在阅读如何将字体设置为 <body> 的好习惯到 62.5%，以便稍后您可以使用像素单位的除以 10 转换。

但我想知道:为什么不设置 <body>到 6.25%？然后您可以为 em 单位使用与像素单位相同的尺寸，假设默认浏览器字体大小为 16 像素。

例如

body {
    font-size: 6.25%; /* 1px */
}

p {
    font-size: 12em; /* 12px */
}

最佳答案

两个问题。

我似乎记得，如果您使用像 ems 这样的相对单位将初始字体大小设置得非常小，如果用户调整文本 Internet Explorer 的大小，字体大小将在设置之间发生很大变化。

这是一个奇怪的现象，我不确定它是否仍然出现在 IE 中，也不确定您是否担心 IE 中的用户更改字体大小。
您可能会在每次嵌套元素时谴责自己重新设置字体大小。

An answer I wrote to another question尽力解释这一点，但简而言之，如果您使用 em 来设置字体大小，最好使用 font-size尽可能少，而不是让它变得更容易使用 font-size当你这样做的时候。

例如:假设您想要所有 <li> s 在网站上使用 12 像素的字体大小。
```
li {
    font-size: 12em;/* 12px */
}
```
如果您随后使用以下 HTML:
```
<ul>
    <li>
        <ul>
            <li>
            ...
```
然后你需要这样做:
```
li li {
    font-size: .083em;/* 12px */
}
```
否则内<li> s 将为 12 像素 * 12 像素 = 144 像素!

Em 不是像素。 Ems 指的是最近祖先字体大小的百分比，而像素指的是实际像素。在我看来，尝试将 em 转换为像素比其他方法更令人困惑。你最好设置 <body>到网站上最常用的字体大小，仅在需要时更改，并在基于 em 的声明后的注释中以像素为单位放置预期的大小。 (这样一来，如果你有什么问题，以后就更容易知道了。)

(当然，我们避免使用像素的唯一原因是当用户在浏览器中更改字体大小时，IE 不会更改以像素为单位的文本大小。如果您不担心这一点，那么只需使用像素。)

关于css - 在CSS中设置字体大小时，为什么不将<body>设置为6.25%，使px和em单位相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3934645/

css - 在CSS中设置字体大小时，为什么不将<body>设置为6.25%，使px和em单位相同？

上一篇：CSS 选择器样式？

下一篇：css - 创建类似于 Masonry 的水平滚动布局