保持子元素的字体大小不受根元素的字体大小的影响答案

【问题标题】：Keep child element's font-size unaffected by root element's font-size保持子元素的字体大小不受根元素的字体大小的影响
【发布时间】：2017-09-19 22:00:49
【问题描述】：

我正在创建一个单页布局，它使用一些纵横比媒体查询来防止滚动。

我遇到的一个问题是，一旦触发某个媒体查询，我希望整个站点缩小：这相对容易，因为我所有的单位都定义为rems，我所要做的就是改变根html 元素的font-size 相对于1.75vw 之类的相对元素，这使得我所有的rem 定义的元素随着窗口宽度的增加而缩小。

但是，我希望一个元素忽略这一点并保持其原始大小。我怎样才能让footer 元素“突破”htmls 的字体大小并像默认行为一样保持恒定大小？想法？

/* ///////////////////////////////// INITIAL /////////////////////////////// */
html {
  color: #777;
  font-family: sans-serif;
}
code {
  font-weight: bold;
  letter-spacing: -0.075rem;
}

/* /////////////////////////////////// VIEWPORT //////////////////////////// */

/* / / / / / / / / / / / / / / / / ASPECT RAITOS / / / / / / / / / / / / / / */
@media ( max-aspect-ratio: 3/1 ) {
  html {
    background-color: #eee;
    font-size: 1.75vw;
  }
}

<!DOCTYPE html>
<html>
  <body>
    <div class="wrp">

      <main>
        <p>Regular paragraph text</p> 
      </main>
      
      <footer>        
        <p>
          I don't want the <code>font-size</code> of this paragrah to be
          affected by the <code>html</code> element's <code>font-size</code>.
          I want this element's <code>font-size</code> to stay at 16 pixels
          at all times as the page is resized.
        </p>
      </footer>

    </div>
  </body>
</html>

【问题讨论】：

您的问题中不是已经有了答案吗？您使用rem 来保持锚定到根元素。您有一个不想锚定到根元素的元素：不要为该元素使用 rem。
@Mike'Pomax'Kamermans 我认为在footer 元素上使用任何单位都行不通，因为它仍然嵌套在具有显式font-size 的html 元素中。跨度>
CSS 的“最具体的规则获胜”。为您的页脚设置自己的大小，该大小“胜出”。

标签： html css fonts size font-size

【解决方案1】：

只需为footer 元素定义css font-size，它不会受到影响。

footer{ font-size:16px;}

这是一个工作示例：

/* ///////////////////////////////// INITIAL /////////////////////////////// */
html {
  color: #777;
  font-family: sans-serif;
}
code {
  font-weight: bold;
  letter-spacing: -0.075rem;
}
footer { font-size:16px ;}
/* /////////////////////////////////// VIEWPORT //////////////////////////// */

/* / / / / / / / / / / / / / / / / ASPECT RAITOS / / / / / / / / / / / / / / */
@media ( max-aspect-ratio: 3/1 ) {
  html {
    background-color: #eee;
    font-size: 1.75vw;
  }
}

<!DOCTYPE html>
<html>
  <body>
    <div class="wrp">

      <main>
        <p>Regular paragraph text</p> 
      </main>
      
      <footer>        
        <p>
          I don't want the <code>font-size</code> of this paragrah to be
          affected by the <code>html</code> element's <code>font-size</code>.
          I want this element's <code>font-size</code> to stay at 16 pixels
          at all times as the page is resized.
        </p>
      </footer>

    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

在这种情况下，我建议简单地覆盖 footer 中的 font-size 属性。

示例：

/* / / / / / / / / / / / / / / / / ASPECT RAITOS / / / / / / / / / / / / / / */
@media ( max-aspect-ratio: 3/1 ) {
  html {
    background-color: #eee;
    font-size: 1.75vw;
  }

  footer{
    font-size: 1vw;
  }
}

这样footer 就不会受到html CSS 规则中定义的font-size 的影响。

【讨论】：