La dimensione del font predefinita di ogni browser è 16px? Perché?

CSS3 definisce una nuova unità di lunghezza per font-size chiamata rem . Questo ci permette di calcolare la dimensione del font-size dell’elemento in relazione all’elemento root (elemento html).

Per calcolare più facilmente la font-size del font-size , in genere si assume che la dimensione del font-size dell’elemento radice sia 16px , quindi il CSS solitamente finisce in questo modo:

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

Quindi, ogni altezza di elemento con rem è relativa a 10px , ad esempio

 p{ font-size : 1.4rem ;} // 14px = 10px * 1.4 

Non riesco a capire perché supponiamo di poter moltiplicare per 16px ? Come possiamo credere che ogni browser abbia lo stesso valore di base di 16px ? C’è una descrizione standard sul 16px predefinito?

arbitro

  • Dimensione carattere MDN
  • W3C rem
  • CanIUse su rem
  • Github skeleton.css

La font-size base è determinata dalle preferenze predefinite dell’utente all’interno del browser.

In quasi tutti i browser, 16px è lo standard per i font proporzionali. Questo può anche cambiare a seconda che il carattere usi i caratteri serif o sia un font a larghezza fissa.

Nella maggior parte dei progetti, di solito premento l’elemento html per utilizzare un valore px anziché un valore % o em/rem solo per garantire che tutti i browser, gli schermi e i dispositivi abbiano la stessa dimensione font e che gli elementi di una pagina mantengano lo stesso dimensioni e proporzioni.

Ricorda, l’uso di em richiede la font-size genitori ed è proporzionale a ciò, mentre rem usa gli elementi html di root

Per esempio:

 html { font-size: 16px; } h1 { font-size: 2em; // 32px } p { font-size: 1em; // 16px } .someClass { font-size: .75em; // 12px } .someClass p { font-size: 2em; // 24px } .someClass p .test { font-size: 1.25rem; // 20px } 
  

2em Title Text

Normal Element Text

someClass font size

SomeClass with em

someClass p element with class test