czy mogę używać em i rem do rzeczy innych niż rozmiar czcionki? [duplikować]
Podsumowując, jednostka em oznacza „rozmiar czcionki mojego elementu nadrzędnego” w przypadku typografii. Te
<li>elementy wewnątrz<ul>z klasy EMS wziąć ich zaklejanie od rodzica. Tak więc każdy kolejny poziom zagnieżdżenia staje się stopniowo większy, ponieważ każdy ma rozmiar czcionki ustawiony na 1,3em - 1,3-krotność rozmiaru czcionki jego rodzica.Podsumowując, jednostka rem oznacza „Rozmiar czcionki elementu głównego”. (rem oznacza "root em".)
<li>Elementy wewnątrz<ul>klasy z klasą remów pobierają rozmiar z elementu głównego (<html>). Oznacza to, że każdy kolejny poziom zagnieżdżenia nie zwiększa się.
To jest wyjaśnienie, które zapewnia Mozilla.
Widzę, że w moich miejscach kodu innych ludzi mają padding: 1.5rem. Oznacza to, że remi emnie są podłączone do czcionek wielkości w ogóle. Czy to prawda?
Pytanie 1) Więc jeśli ustawię padding:1.5remelement, jaki będzie miał rozmiar? na co patrzy, aby mógł obliczyć własny rozmiar wypełnienia?
Pytanie 2) O co chodzi padding:1.5em?
Odpowiedzi
Tak, możesz używać em i rem do dowolnej miary długości.
Pytanie 1) Jeśli więc ustawię dopełnienie: 1.5rem na elemencie, jaki będzie miał rozmiar? na co patrzy, aby mógł obliczyć własny rozmiar wypełnienia?
Jeśli wypełnienie elementu wynosi 1,5 rm, będzie on miał długość 1,5 razy większą niż rozmiar czcionki elementu HTML. W poniższym przykładzie zewnętrzne pudełko ma wypełnienie 1,5x lub 15px, a wewnętrzne pudełko ma 2x lub 20px.
html{
font-size: 10px;
}
.p,.c{
border: solid 1px #f00;
}
.p{
padding: 1.5rem;
}
.c{
padding: 2rem;
}<div class='p'>
<div class='c'></div>
</div>Pytanie 2) A co z dopełnieniem: 1,5 em?
Element z wypełnieniem 1,5 em zajmie 1,5 x rozmiar czcionki najbliższego rodzica (łącznie z własnym) z ustawionym rozmiarem czcionki. Jeśli więc ustawisz rozmiar czcionki zewnętrznej ramki z poprzedniego przykładu na 8px, będzie ona miała wypełnienie 1,5x lub 12px, a element wewnętrzny będzie miał wypełnienie 2x lub 16px.
html {
font-size: 10px;
}
.p,
.c {
border: solid 1px #f00;
}
.p {
font-size: 8px;
padding: 1.5em;
}
.c {
padding: 2em;
}<div class='p'>
<div class='c'></div>
</div>Odpowiedź 1: Jeśli więc ustawisz padding:1.5rem, rozmiar będzie zgodny z rozmiarem czcionki głównej głównego kodu HTML, czyli 24 piksele. (Domyślnie 1rem to 16 pikseli)
Następnie ustawia przestrzeń wypełniającą zgodnie z podaną wartością i mnoży ją przez rozmiar czcionki elementu głównego (HTML).
Odpowiedź2: I powoduje to samo z em , mnoży wartość em zgodnie z podanym rozmiarem czcionki. Domyślnie jest to 12px dla 1em. Więc jeśli ustawisz paddind:1.5em, doda przestrzeń wypełnienia 16px.
Niech to pomoże.
Uwaga: em to px i rem to pxwartości mogą różnić.