混淆在<meter>标签中

Question

有人能帮助我理解2米之间的差异，以及为什么他们之间的颜色差异值相同吗？

​

<meter low="69" high="80" max="100" value="84">A</meter><span>MDN example</span> <br>

<meter low="30" high="80" max="100" value="84">B</meter>

​

Answer 1

这是因为不同的低价值和高价值。

现在，仪表标签形成三个区域：

一个从最小(0)到最低，另一个从低到高，第三个从高到最大(100)。

最优默认值为50。你可以把它设置成你想要的任何价值。现在，在任何地方，最优的是彩色绿色。邻区是黄色的，最远的是红色的。

在第一个示例中，默认值为50。如果我做了low=60和high=80，那么0到60之间的任何东西都是绿色的，60到80之间是黄色的，80到100之间是红色的。

在第二个示例中，我设置了optimum=70，将低值和高值保持不变。那么从0到60之间的任何东西都是黄色的，60到80之间是绿色的，从80到100之间是黄色的。

​

<p>First exmple</p>
<meter low="60" high="80" max="100" value="34">A</meter><br/>
<meter low="60" high="80" max="100" value="65">B</meter><br/>
<meter low="60" high="80" max="100" value="84">C</meter><br/>
<p>Second exmple</p>
<meter low="60" high="80" optimum="70" max="100" value="34">A</meter><br/>
<meter low="60" high="80" optimum="70" max="100" value="65">B</meter><br/>
<meter low="60" high="80" optimum="70" max="100" value="84">C</meter><br/>

​

Answer 2

色差是因为表标签将值与最优值进行比较的方式。以下将使这两米都变成黄色：

​

<span>MDN example</span><br>
<meter low="69" optimum="80" high="80" max="100" value="84">A</meter><br>
<meter low="30" optimum="40" high="80" max="100" value="84">B</meter>

​

关于这一点的详细解释可以找到这里。