Html 保留子元素'；s字体大小不受根元素影响'；字体大小

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

但我遇到的一个问题是，一旦触发某个媒体查询，我希望整个网站的规模缩小：这相对容易，因为我所有的单位都定义为

rems

，我所要做的就是将根

html

元素的

font size

更改为类似

1.75vw

的相对大小，这使得我定义的所有

rem

元素都随着窗口宽度而缩小

但是，我希望有一个元素忽略这个，并保持其原始大小。如何使

footer

元素在

html

s字体大小中有一种“突破”，并保持默认行为中的恒定大小？想法

///////////////////////////////////////INITIAL//////////*/
html{
颜色：#777；
字体系列：无衬线；
}
代码{
字体大小：粗体；
字母间距：-0.075rem；
}
/*/////////////////////////////VIEWPORT////////*/
/*/////////ASPECT RAITOS/////*/
@介质（最大纵横比：3/1）{
html{
背景色：#eee；
字体大小：1.75vw；
}
}

常规段落文本


我不希望这一段的
字体大小

受
html
元素的
字体大小影响。
我希望此元素的
字体大小保持在16像素
在调整页面大小的任何时候。

只需为
页脚
元素定义css
字体大小
，它将不受影响

footer{ font-size:16px;}

以下是一个工作示例：


///////////////////////////////////////INITIAL//////////*/
html{
颜色：#777；
字体系列：无衬线；
}
代码{
字体大小：粗体；
字母间距：-0.075rem；
}
页脚{字体大小：16px；}
/*/////////////////////////////VIEWPORT////////*/
/*/////////ASPECT RAITOS/////*/
@介质（最大纵横比：3/1）{
html{
背景色：#eee；
字体大小：1.75vw；
}
}

常规段落文本


我不希望这一段的
字体大小

受
html
元素的
字体大小影响。
我希望此元素的
字体大小保持在16像素
在调整页面大小的任何时候。

只需为
页脚
元素定义css
字体大小
，它将不受影响

footer{ font-size:16px;}

以下是一个工作示例：


///////////////////////////////////////INITIAL//////////*/
html{
颜色：#777；
字体系列：无衬线；
}
代码{
字体大小：粗体；
字母间距：-0.075rem；
}
页脚{字体大小：16px；}
/*/////////////////////////////VIEWPORT////////*/
/*/////////ASPECT RAITOS/////*/
@介质（最大纵横比：3/1）{
html{
背景色：#eee；
字体大小：1.75vw；
}
}

常规段落文本


我不希望这一段的
字体大小

受
html
元素的
字体大小影响。
我希望此元素的
字体大小保持在16像素
在调整页面大小的任何时候。

在这种情况下，我建议简单地覆盖
页脚中的
字体大小
属性

示例：

/* / / / / / / / / / / / / / / / / 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
的影响。
在这种情况下，我建议简单地覆盖
footer
中的
font size
属性

示例：

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

  footer{
    font-size: 1vw;
  }
}

这样，
页脚
就不会受到
html
CSS规则中定义的
字体大小
的影响。
答案不是已经在你的问题中了吗？您可以使用
rem
固定到根元素。您有一个元素不希望锚定到根元素：不要对该元素使用
rem
。@Mike'Pomax'Kamermans我认为在
页脚
元素上使用任何单位都不会起作用，因为它仍然嵌套在
html
元素中，该元素具有明确的
字体大小
“最具体的规则获胜”对于CSS。给你的页脚一个自己的尺寸，这个尺寸就“赢”了。答案不是已经在你的问题中了吗？您可以使用
rem
固定到根元素。您有一个元素不希望锚定到根元素：不要对该元素使用
rem
。@Mike'Pomax'Kamermans我认为在
页脚
元素上使用任何单位都不会起作用，因为它仍然嵌套在
html
元素中，该元素具有明确的
字体大小
“最具体的规则获胜”对于CSS。给你的页脚自己的尺寸，这个尺寸“赢”。