html - 如何将 em 设置为 10px 以获得完整的网站

Question

我正在为响应式网站创建模板。我了解到 em 非常适合用于响应式设计。但问题是我将正文字体大小设置为 62.5%，但是当我使用 p、span 和其他元素（如 2em）时，字体大小比 2 em 与 20px 不同。根据我的默认字体大小，正文中的任何位置都应该是 2em=20px，因为 62.5% 会覆盖默认的 1em=16px 到 10px。请建议我应该改变什么，以便每当我将任何元素的字体大小设置为 2em 时，它都会是 20 像素。

Answer 1

你不能。改为使用rem。它指的是根元素的字体大小。

Answer 2

BODY {font-size:62.5%}

这需要 16px 到 10px。从现在开始，以像素为单位很容易思考，但仍以 em 为单位设置大小：1em 是 10px，0.8em 是 8px，1.6em 是 16px，等等。

.element {  
    font-size: 20px;  
    width: 4em;  
    height: 4em;  
} 

那么这意味着元素的宽度和高度（此处定义为 4em x 4em）将计算为 80px x 80px (20px * 4 = 80px)。

阅读 1 阅读 2

Answer 3

你不能。根据em定义，单位等于元素的字体大小，或者font-size单独设置时，等于父元素的字体大小。

结论取决于您真正想做的事情，这从问题中不清楚。如果您想要以像素为单位的特定尺寸，请使用该px单位（及其所有模糊性）。如果您想要调整大小，以便您或用户可以轻松更改基本字体大小并相应地调整所有其他字体大小，请始终使用em单位或%单位，并适当考虑元素嵌套。例如，font-size: 2em仅当您希望字体大小为父元素字体大小的 2 倍时才使用 - 如果您想要不同的比例，请使用不同的值。

Answer 4

这可能是您的字体大小从任何父标签继承的问题......