html - iframe 中的字体大小总是很大 (em)

Question

我正在制作一个简单的网站，将其放置在其他人网站的 iframe 中。出于某种原因，当内容放在 iframe 中时，字体大小总是很大。

在左侧您可以看到它放置在 iframe 中，在右侧它是在没有 iframe 的情况下加载的。

我有:

body { 
    font-size: 8px; 
}

还有:(我更喜欢这个)

body { 
    font-size: 62.5%; 
}

并在其他类上使用了 em，因此它们会根据为正文设置的字体大小进行缩放。但是在 iframe 中这似乎不起作用。

这是我在检查器中看到的:

在计算中它是 32 像素。这可能是 16px 默认乘以 2em。我怎样才能解决这个问题，仍然使用 2em 来设置字体？更重要的是，如果有人知道，是什么导致了这个问题？

Answer 1

这里的问题是特异性和级联。检查器总是按照最具体到最不具体的顺序列出选择器。如果两个选择器具有相同的权重，则级联(源顺序)开始，后来出现的选择器胜出。

例如:

p {
    color: white;
    margin: 0 0 1em;
}
/* ... bunch of other CSS here ... */
p {
    color: blue;
}
/* final rule */
p {
    color: blue;
    margin: 0 0 1em;
}

font-size: 62.5%在 body 上用于设置来自 16px 的基本字体大小至 10px (16 x 0.625 = 10)。您的媒体查询正在将基本字体大小改回 16px与 font-size: 100%因为它出现在文档的后面。

自 ems是一个相对测量值，您必须不更改font-size在媒体查询中 100% (有效地删除该选择器)或为 #header p 添加媒体查询改变 em值(value)。

@media(...) {
    #header p {
        font-size: 1.25em; /* 20/16 = 1.25 */
    }
}