font in base alla risoluzione dello schermo

[morphy79]

Ciao, l'unità em è scalabile ed è relativa (in modo percentuale) alla dimensione del font applicata al genitore dell'elemento in questione.


Questo è vero per metà. I valori espressi in em non sono direttamente relativi al body ma al proprio contenitore, come già detto. Da precisare che il valore (calcolato) del font-size, viene passato in modo ereditario da padre a figlio. Quindi la tua affermazione è vera se a tutti i livelli (dove vai a definire font-size) usi una dimensione in percentuale, come appunto em. A quel punto, se hai definito font-size sul body (che sia in px o in qualunque altra unità di misura), la dimensione di base farà riferimento a questa.

In realtà esiste anche l'unità di misura rem (cioè "root-em") che, a differenza di em, non fa riferimento alla dimensione font del genitore ma a quella del livello base.

La dimensione di base è definita dal browser. Di norma corrisponde a 16px. Tale valore può essere però "influenzato" agendo, ad esempio, sullo zoom del testo nelle impostazioni di visualizzazione del proprio browser.

Venendo al dunque, per risolvere il tuo problema puoi agire in vari modi, tra cui:

- usare em sui vari elementi e quindi ridefinire opportunamente, ad esempio con le media query, la dimensione di base sul body.

- usare le nuove unità vw o vh (CSS3) per definire il font-size dei singoli elementi. Queste unità di misura fanno riferimento alle dimensioni del viewport.

- usare vw o vh sul body e quindi em (o, meglio, rem) sui vari elementi contenuti. Questo ti permette di avere un valore di base relativo alla dimensione del viewport, quindi dei valori per i contenuti in funzione di quello di base e relativi in modo percentuale. In questo modo, in fase di sviluppo, potrai avere una migliore gestione del font-size generale dell'intera pagina, che si comporterà in modo responsive, nonché dei singoli elementi che saranno relativi a quel valore.

Per altre informazioni su vw e vh, e non solo, puoi dare uno sguardo tra i link utili capitolo 9, sotto "font > unità di misura", c'è qualche articolo interessante.

perfetto ci studio su grazie