html - 字体大小 100%，但有异常(exception)

Question

我正在构建一个响应式网页，我希望我的页面字体设置为 100%，导航文本除外，以保持一致。我认为通过媒体查询定位导航字体大小可以做到这一点，然后我认为添加重要会起作用，但遗憾的是，运气不好。

@media (max-width: 950px) {
    body {font-size:95%;}

    nav {font-size:100% !important;}
}

Answer 1

因为您希望页面上的所有字体都是 100%，除了 nav 元素，所以您设置的百分比是错误的。另外，不确定为什么要在媒体查询中设置此集合。

为了理解下面的示例，您需要了解，由于您将 body 的 font-size 设置为 150%，因此通过设置 nav font-size 到 95% 您现在将 nav font-size 设置为 95% 150%，相当于 142.5%。字体大小百分比是相对于其父项的。

这是我的建议:

#navContainer {
  font-size: 150%;
}

nav {
  font-size: 95%;
}

#standalone_Nav nav {
  font-size: 142.5%;
}

<div id="navContainer">
  <div>This is body text at 150%</div>
  <nav>This is Nav Text at 95% of 150%</nav>
</div>

<div id="standalone_Nav">
  Standalone standard text
  <nav>Nav text set at 142.5%</nav>
</div>