使用CSS更改输入字段内的字体大小

Question

html{
	font-size:62.5%;
}

body{
	font-family:arial;
	font-size:1.1rem;
}

<p>LOREM IPSUM</p>
<p>LOREM IPSUM</p>

<input type = 'text' value = 'LOREM IPSUM'>

为什么font-size:1.1rem在输入字段中不起作用？

如何获取整个页面的全局字体大小？

Answer 1

这是因为与input元素不同，font-size已经由用户代理定义了p，因此p元素将继承定义的值body和input的值将使用其自己的值，除非您覆盖它：

因此，输入元素将具有font-size的计算值，如下所示：

如您所见，正文的字体被认为是，但默认情况下已被已定义的字体覆盖。

Answer 2

input字段不受您为body元素制作的字体变化的影响。您必须分别设置样式。

使用

input[type=text] {
    font-size: inherit;
}

Answer 3

这是一个替代解决方案。只需两行 CSS 。如果您想使文本以某种方式响应，请尝试使用视口单元，例如vmax。

html * {
 font-family:arial;
 font-size:2vmax;
}

<p>LOREM IPSUM</p>
<p>LOREM IPSUM</p>

<input type = 'text' value = 'LOREM IPSUM'>

<div>LOREM IPSUM</div>
<span>LOREM IPSUM</span>
<p>LOREM IPSUM</p>
<select>
<option>LOREM IPSUM</option>
<option>LOREM IPSUM</option>
<option>LOREM IPSUM</option>
<option>LOREM IPSUM</option>
</select>

编辑

*表示每个元素，它回答了OP的问题。

  

如何在整个页面上获得相等的字体大小？