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

Question

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

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

但是，我希望一个元素忽略这一点并保持其原始大小。我怎样才能让 footer 元素排序为 "break out" 的 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>

Answer 1

只需为 footer 元素定义 css font-size 并且 它将不受影响 .

footer{ font-size:16px;}

Here is a working example:

/* ///////////////////////////////// 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>

Answer 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 的影响。

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

Keep child element's font-size unaffected by root element's font-size

html

css

size

fonts

font-size