Странное поведение с использованием элементов rem разной высоты

Я устанавливаю размер шрифта html в единицу ширины окна просмотра. Затем я устанавливаю высоту div в единицах rem. Когда вы нажимаете разную ширину области просмотра, высота элементов не одинакова, даже если единица rem одинакова.

Пример:

html{
  font-size: 1.3vw;
}

div{
  margin: 10px;
  width: 100px;
  height: 0.2rem;
  background: red;
}
<div></div>
<div></div>

Если вы измените размер окна в приведенном выше фрагменте, вы увидите, что высота div меняется при изменении размера окна, даже если они должны оставаться одинаковой высоты. Почему это происходит?


html css viewport-units
person Steve K    schedule 06.03.2020    source источник
comment
субпиксельный рендеринг   -  person Temani Afif    schedule 07.03.2020
comment
@TemaniAfif Постарайтесь объяснить   -  person Steve K    schedule 07.03.2020
comment
stackoverflow.com/q/34676263/8620333   -  person Temani Afif    schedule 07.03.2020
comment
@TemaniAfif Это не объясняет, почему браузер будет использовать разные значения для одного и того же элемента с точно такой же единицей rem, которая не имеет ограничений оболочки. Если браузер должен округлять до процента пикселей, не должен ли он округляться до одного и того же числа для каждого элемента?   -  person Steve K    schedule 07.03.2020
comment
это не один и тот же элемент одного и того же, это два разных элемента с одним и тем же свойством, и это не означает, что они точно будут отображаться одинаково. Они не размещены в одном и том же месте, будут отображаться в другом порядке и т. д. Таким образом, они больше отличаются, чем вы думаете, что кажется достаточным для того, чтобы браузер мог отображать их по-разному.   -  person Temani Afif    schedule 07.03.2020