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

我正在创建一个使用少数宽高比媒体查询来防止滚动的单页布局。保持子元素的字体大小不受根元素字体大小的影响

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

但是，我想要一个元素忽略此并保持它的原始大小。我怎样才能让footer元素排序html的字体大小，并保持默认行为的恒定大小？想法？

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

来源

2017-04-23 sol acyon

是不是已经在你的问题的答案？你使用'rem'来保持锚定到根元素。你有一个你不想锚定到根元素的元素：不要使用'rem'作为该元素。 –

@ Mike'Pomax'Kamermans我以为使用'footer'元素上的任何单位都不会工作，因为它仍然嵌套在具有明确'font-size'的'html'元素中。 –

CSS的“最具体的规则获胜”。给你的页脚自己的尺寸和大小“赢”。 –

只是deifine的CSSfont-size为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>

来源

2017-04-23 04:47:42

在这种情况下，我会建议只是覆盖在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受到影响。

来源

2017-04-23 04:48:47

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

回答

相关问题