HTML 定义为继承时输入字体大小更大

Question

我正在使用 Chrome，默认字体大小为 16px。

我想通过媒体查询根据屏幕 width 调整 font-size。

我看到一些 CSS 专家将默认 16px 字体大小调整为基于 1.6rem 的系统。

所以背后的想法是将 1rem 均衡到 10px 并将所有内容用作 rem 然后如果需要调整某些内容仅更改 font-size 这样所有测量值都会改变以相同的比例。

看这个例子

* {
  font-size: inherit;
}

html {
    font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

<p>Hello</p>

<input type="text" value="Hello">

谁能解释为什么 input 中的 font-size 大于 p？

此外，如果我尝试在开发工具中获取 font-size，我将无法获取任何值。

如果我像这样通过 JavaScript 获取它

document.getElementsByTagName("input")[0].style.fontSize

我得到''

Answer 1

默认情况下输入不继承，但您可以将其设置为继承 css:

input{font-family:inherit;}

* {
  font-size: inherit;
}

html {
    font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
input{font-family:inherit;}

<p>Hello</p>

<input type="text" value="Hello">

Answer 2

您查看样式时得到的结果为空，因为尚未设置内联样式。

这两个 Hello 的字体大小没有不同 - 都是 16px，但段落是 Times New Roman，输入是 Arial - 浏览器默认设置，至少我在 Chrome/Edge 中检查过在 Windows10.

值得使用浏览器的检查工具来准确查看每种样式的设置，它还会向您显示计算后的样式。

HTML input font-size is greater when defined as inherit