Question

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

我遇到的一个问题是，一旦触发某个媒体查询，我希望整个网站缩小：这相对容易，因为我的所有单位都被定义为rems，我只有要做的是将根html元素font-size更改为像1.75vw这样的相对元素，这会使我所有rem定义的元素按窗口宽度缩小。

但是，我希望一个元素忽略它并保持其原始大小。如何让footer元素排除＆＃34;突破＆＃34; html的字体大小并保持默认行为的常量大小？想法？

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

为font-size元素定义 css footer，不受影响。

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>

Answer 2

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

示例：

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

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

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

2 个答案: