Prosty kod. CSS- czemu dla font-size REM i PX działa tutaj inaczej?

Question

Witam,

Mam szybkie pytanie:

W podanym przykładzie mam dwa <p>. Jeden ma  font-size: 40px, a drugi ma  font-size: 4rem. Html ma ustawione:   font-size: 62.5%;   , czyli  10px.

Więc dla font-size: 4rem powinno dać 40px.  Ale tak nie jest.

Oba <p> powinny mieć taki sam font-size, po 40px.  Ale drugi <p> ma mniejszy font nize pierwszy <p> z 40px.

Czemu tak jest?

Link do codepen

 

Dziękuje z odpowiedź.

Comments

Ale drugi <p> ma mniejszy font nize pierwszy <p> z 40px.

Czemu tak jest?

 Po czym stwierdzasz, że drugi <p> ma mniejszy font-size?

---

U mnie w obu przegladarkach: Chrome Wersja 91 i Firefox wersja 89.0.2 mam taki widok tekstu:

Nie wiem, czy mam od nowa przegladarki spróbować zainstalować czy jak?

Answer 1

Zacznijmy od tego, że 62.5% TO NIE JEST 10px. To jest 62.5% domyślnego rozmiaru fontu, jaki masz ustawiony w przeglądarce. Najczęściej jest to 16px, ale NIE MUSI BYĆ. I najwyraźniej w Twoim przypadku tak jest – domyślny rozmiar fonta jest inny niż 16px.

Innymi słowy: założenie, że 62.5% daje nam 10px, jest całkowicie błędne. Jeśli chcesz liczyć w pikselach, to… licz w pikselach – tyle. Nie ma sensu używać rem, jeśli w rzeczywistości przeliczasz je na piksele. Relatywne jednostki mają sens, gdy się je używa, myśląc proporcjami i relacjami między poszczególnymi częściami strony, nie konkretnymi rozmiarami.

Comments

To rozwiązało problem. Nigdy nie wiedziałem o tym. Faktycznie miałem źle ustawiony domyślny rozmiar fontu (w obu przeglądarkach), zamiast 16px na mniejsze rozmiary.

 

Innymi słowy: założenie, że 62.5% daje nam 10px, jest całkowicie błędne. Jeśli chcesz liczyć w pikselach, to… licz w pikselach – tyle. Nie ma sensu używać rem, jeśli w rzeczywistości przeliczasz je na piksele. Relatywne jednostki mają sens, gdy się je używa, myśląc proporcjami i relacjami między poszczególnymi częściami strony, nie konkretnymi rozmiarami.

Dziękuję za radę. Przemyśle to.

Answer 2

Jaka przeglądarka? U mnie (Firefox 89.0.2) oba akapity są takiej samej wielkości. dopisz sobie jeszcze jeden stylizowany inline i zobaczysz, że wszystkie są takie same.

<p style="font-size: 40px;">lorem</p>

 

Comments

Ten sam bład jest w przegladarkach:  Chrome Wersja 91 i Firefox wersja 89.0.2,

Answer 3

Chrome, FF, Opera, takie same.  

<p class='a'>lorem</p>
<p class='b'>lorem</p>

<pre></pre>

*  { 
  box-sizing: border-box;
  margin: 20px 60px;
  padding: 0;
}

html {
  font-size: 62.5%;   /*  10px */
}

body {
  font-size: 1.6rem;  /*  16px */
  font-family: sans ;
}

.a { font-size: 40px; }
.b { font-size: 4rem; }

const pre = document.querySelector('pre'),
      a = document.querySelector('.a'),
      b = document.querySelector('.b'); 

window.addEventListener('DOMContentLoaded', () => {
  pre.textContent = 'a: ' + window.getComputedStyle(a).getPropertyValue('font-size') + '\n'
                  + 'b: ' + window.getComputedStyle(b).getPropertyValue('font-size');  
});

 

Comments

Uruchomiłe ten kod w codepen i nadal mam taki sam widok.

Javascript wyświetlił:

Na Firefox:

a: 40px
b: 30px

Na Chrome:

a: 40px
b: 35px

Czyli przeglądarka coś źle liczy.

---

Sprawdź w ustawieniach przeglądarki jaki masz domyślny rozmiar czcionki. Z twoich wyników można wnioskować, że w Firefoksie jest to 12px, a w Chromie 14px.

Answer 4

Problem z przeglądarką, albo domyślnie dziedziczenie jest  inne u Ciebie, jeśli to jest fragment w jakimś rodzicu co może coś zmienić : 
Rem (relative to font-size of the root element) działa niemal na identycznej zasadzie, jak em, z tą różnicą, że rozmiar nie jest dziedziczony bezpośrednio od rodzica, tylko z najwyższego elementu w DOM strony. Najczęściej jest to znacznik HTML.