保持子元素的字体大小不受根元素的字体大小影响
[英]Keep child element's font-size unaffected by root element's font-size
问题描述
I'm creating a one-page layout which uses a few aspect-ratio media queries to prevent scrolling. 
我正在创建一个单页布局，该布局使用一些长宽比媒体查询来防止滚动。
One problem I'm having though is I want the whole site to scale smaller once a certain media query is triggered: This is relatively easy because all of my units are defined as rems , all I had to do was change the root html element's font-size to a relative one like 1.75vw which makes all my rem defined elements scale smaller with the windows width. 我遇到的一个问题是，一旦触发某个媒体查询，我希望整个网站的规模缩小：这相对容易，因为我所有的单位都定义为rems ，我要做的就是更改根html元素的font-size到一个相对的1.75vw ，例如1.75vw ，这使我所有的rem定义的元素都随窗口宽度缩小。
However, I want one element to ignore this and stay it's original size. 但是，我希望一个元素可以忽略它并保持其原始大小。 How can I have the footer element sort of "break out" of the html s font size and stay a constant size as in default behavior? 我如何才能像“默认行为”那样使footer元素“突破” html的字体大小并保持恒定大小？ Ideas? 有想法吗？
/* ///////////////////////////////// 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>
2 个解决方案
解决方案1
1 已采纳 2017-04-23 04:47:42
Just deifine the css font-size for footer element and it will be unaffected . 只需为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>
解决方案2
1 2017-04-23 04:48:47
In this case I'd suggest simply overriding the font-size property in the footer . 在这种情况下，我建议您简单地覆盖footer的font-size属性。
Example: 例：
/* / / / / / / / / / / / / / / / / ASPECT RAITOS / / / / / / / / / / / / / / */
@media ( max-aspect-ratio: 3/1 ) {
html {
background-color: #eee;
font-size: 1.75vw;
}
footer{
font-size: 1vw;
}
}
That way the footer won't be affected by the font-size defined in the html CSS rule. 这样， footer就不会受到html CSS规则中定义的font-size影响。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.