font in base alla risoluzione dello schermo

[morphy79]

ciao a tutti, fino ad ora non mi ero mai posto questo problema
ho dovuto realizzare un portale di monitoraggio di linee telefoniche in tempo reale
sul mio pc, su altri, tutto bello tutto figo.. ma provandolo su un monitor (un tv) enorme, una roba oltre i 60 pollici, non si leggeva nulla...
nel css ho usato le misure in px.. ho letto in giro che bisogna usare gli em che hanno unità di misura relativa, ma non capisco.. è relativa in base alla dimensnione in px definita nel body..
ma allora cosa cambia ??
cioè se nel body metto 1px e in un tx 10em mi diventano 10px.. ma rimarranno sempre piccoli sul megaschermo.. quindi non capisco.. io ho bisogno che nel megaschermo si vedano bene, tanto quanto mi collego dal mio portatile..

allego una parte del mio css (ma non è nulla di eclatante anzi)

html,body {
        margin: 0px; padding:0;
    }
    table.layoutGeneral{
        width: 100%;
    }
    td.monitor_titolo{
        font-family: Helvetica;
        font-size: 18px;
        font-weight: bold;
        padding-left:14px;
    }
    td.monitor_titolo_small{
        font-family: Helvetica;
        font-size: 12px;
        padding-left:14px;
    }
    td.monitor_titolo_logo{
        font-family: Helvetica;
        font-size: 12px;
        padding-right:14px;
    }
    
    div.monitor_title{
        font-family: Helvetica;
        font-size: 12px;
        font-weight: bold;
        text-decoration: underline;
        padding-top:4px;
        padding-bottom:4px;
        padding-left:4px;
        padding-right:4px;
    }
    
    td.monitor_intestazione{
        font-family: Helvetica;
        font-size: 12px;
        padding-top:4px;
        padding-bottom:4px;
        padding-left:4px;
        padding-right:4px;
        background-color: #00679E;
        color: #FFFFFF;
        vertical-align: bottom;
        font-weight: bold;
        white-space: nowrap;
    }

[KillerWorm]

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

è relativa in base alla dimensione in px definita nel body..

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.

[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