css - 相对于重写值的字体大小

Question

我知道em会将font-size设置为相对于父级。如果我想设置相对于给定元素的重写值的字体大小怎么办？

例如：

h1 {
    font-size: 20px;
}

.smaller h1 {
    font-size: (80 percent of the standard h1);
}

这可能吗？

我应该提一下，我正在使用less，这可能会提供更多的灵活性。

Answer 1

不确定EM，我想你可以尝试一下，看看会发生什么。

如果你想利用less的变量，你可以这样做：

@h1-font-size: 20px;
h1 { 
    font-size: @h1-font-size;
}

.smaller h1 {
    font-size: @h1-font-size * .8;
}

Answer 2

你做不到。没有办法相对于“被覆盖的价值”做任何事情。你应该以不同的方式设计你的造型。

将标题大小设置为某些标题的固定像素数并且相对于“覆盖值”（通常是未知的，并且应该预期与浏览器相关）将会很奇怪。

但是，如果您希望浏览器具有常见的默认值，那么您几乎可以使用HTML5 “expected rendering” rules，因为它们反映了通常的浏览器实践。根据他们的说法，h1有font-size: 2.00em，因此如果您希望将某个尺寸设置为80％，请使用1.6em。