我正在创建一个单页布局，它使用一些纵横比媒体查询来防止滚动。
但我遇到的一个问题是，我希望在触发某个媒体查询后整个站点缩小:这相对容易，因为我所有的单位都定义为 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>最佳答案
只需为 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>关于html - 保持子元素的字体大小不受根元素字体大小的影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43567459/