В вашем случае вы должны использовать rem
вместо em
.
Взгляните здесь .
em
относительно шрифта-size его ближайшего родителя, в то время как rem
относится к корневому размеру шрифта.
Я хотел бы думать, что "r" из rem
как "root em".И корень означает html
, а не body
элемент.
console.log("padding of div em : " + window.getComputedStyle(em).padding);
console.log("padding of div rem : " + window.getComputedStyle(rem).padding);
html {
font-size: 10px;
}
div.parent {
font-size: 20px;
}
div.child {
border: 1px solid black;
margin: 5px;
}
#em {
padding: 1em;
}
#rem {
padding: 1rem;
}
<div class="parent">
<div id="em" class="child">1em</div>
<div id="rem" class="child">1rem</div>
</div>