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值的媒体查询。

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