Unità di lunghezza in CSS. Dimensionamento con unità vw e vh

11.08.2019 Recensioni

CSS3 ha nuove unità di misura. (Penso di averne già parlato. ing) Hai già sentito parlare di px, pt, em e del nuovo rem. Diamo un'occhiata ad alcuni altri: vw e vh.

Spesso ci sono elementi nel layout che sono garantiti per adattarsi alla finestra del browser. In generale, JavaScript viene utilizzato per questo. Controlla le dimensioni della finestra e ridimensiona gli elementi di conseguenza. Se l'utente ridimensiona la finestra del browser, la procedura viene ripetuta.

Con vw/vh possiamo impostare la dimensione degli elementi rispetto alla dimensione del viewport. Le unità vw/vh sono interessanti perché 1vw è un'unità pari a 1/100" della larghezza della finestra. Per assegnare a un elemento una larghezza uguale alla larghezza della finestra, ad esempio, impostare width:100vw.

Come può essere utilizzato

I lightbox sono un ottimo candidato per vw e vh poiché di solito sono posizionati rispetto al viewport, tuttavia trovo position:fixed with top , bottom , left e right per essere più facili da usare in quanto non devi impostare l'altezza e la larghezza affatto.

È possibile utilizzare le nuove unità per dimensionare gli elementi che si trovano nel flusso normale. Ad esempio, posso inserire screenshot nella pagina. L'altezza di questi screenshot non deve superare l'altezza del viewport. Per fare ciò, posso impostare l'altezza massima delle immagini:

Img ( altezza massima:95vh; )

In questo caso, sto impostando l'altezza su 95vh per lasciare un po' di spazio quando sono sullo schermo.

Supporto del browser

Se rem è supportato da quasi tutti i principali browser, incluso IE9, vale la pena di usare vw e vh. Attualmente solo Internet Explorer 9 li supporta.

Le unità CSS svolgono un ruolo importante nella creazione di siti Web e nel dimensionamento di vari elementi. I valori CSS possono essere espressi come numeri positivi o negativi, sebbene alcune proprietà accettino solo numeri positivi. Il valore numerico è seguito da un'abbreviazione di due lettere che indica l'effettiva unità di lunghezza. Ad esempio, cm (centimetri), px (pixel) o em CSS . L'eccezione a questa regola è il valore 0 (zero), che non richiede un'unità.

Esistono due tipi di unità CSS: assoluta e relativa.

Unità di lunghezza assoluta in CSS

Le unità assolute CSS non sono adatte per il web design. Sono una designazione digitale dei risultati delle misurazioni nel mondo fisico e non dipendono dalle dimensioni e dalla risoluzione dello schermo. Le lunghezze assolute con lo stesso valore possono differire su schermate diverse. Ciò è causato dalla differenza nel DPI dello schermo (punti per pollice).

Gli schermi ad alta risoluzione hanno un DPI più elevato rispetto agli schermi a risoluzione inferiore, rendendo le immagini e il testo più piccoli su di essi. Le unità assolute vengono utilizzate quando si definiscono gli stili di stampa in cui le misurazioni sono in pollici, punti e pica.

Unità di lunghezza assoluta:

cm (centimetri);
mm (millimetri);
in pollici);
pc (picchi);
pt (punti);
px (pixel).

La maggior parte delle unità di lunghezza assolute sono inutili sul web. L'unica eccezione è px. I pixel sono unità relative rispetto alla risoluzione dello schermo. Per stampanti e monitor ad altissima risoluzione, un pixel in CSS equivale a diversi pixel sullo schermo, quindi il numero di pixel per pollice è di circa 96. Un pixel è l'unità di misura più piccola ed è comunemente usata come guida per gli altri.

Unità di lunghezza relativa in CSS

Le unità di lunghezza relativa in CSS non hanno valori fissi. I loro significati dipendono da altri setpoint o funzioni. Sono più richiesti nel web design perché rendono più facile determinare la dimensione di un elemento. Con il loro aiuto, puoi impostare la larghezza, l'altezza, la dimensione del carattere, ecc. rispetto ad altri parametri di base.

Unità relative a seconda del carattere

Le unità relative specifiche del carattere si riferiscono a una dimensione del carattere predefinita o al valore della proprietà della famiglia di caratteri:

ex (altezza del carattere x );
ch( larghezza del carattere zero (0));
em unità in css (altezza del carattere dell'elemento corrente);
rem( dimensione del carattere dell'elemento radice).

ex

Definito come " x altezza del carattere del font corrente OPPURE metà di 1 em". Cioè, l'altezza della x minuscola del carattere installato. La modifica del valore della proprietà font-family cambia l'unità di ex.

cap

Uguale alla larghezza del carattere 0 . Questa unità cambia anche quando cambia il valore della proprietà font-family.

em

L'unità CSS em ha un valore uguale alla dimensione del carattere dell'elemento principale o genitore. Ad esempio, se la dimensione del carattere dell'elemento padre è 30px , il valore di 1em verrà calcolato come 30px (30 x 1 ) per tutti gli elementi figlio. Il numero non deve essere un numero intero. Se nell'esempio sostituiamo 1em con 0,5, il valore sarà 15px (30 x 0,5).

L'unità em assume il valore del tag padre. Ciò può portare a risultati indesiderati quando si utilizzano elementi nidificati.

Diciamo di avere tre elementi nidificati. Il primo elemento (l'elemento radice) ha una dimensione del carattere di 30px e i due elementi nidificati hanno una dimensione del carattere di 2em. Un elemento annidato nell'elemento radice avrà una dimensione del carattere calcolata come 60px (30 x 2). E l'elemento annidato al suo interno avrà una dimensione del carattere calcolata come 120px (60 x 2 ).

rem

rem è simile a CSS em , ma il suo valore rimane sempre uguale alla dimensione del carattere dell'elemento radice. L'unità rem è utile durante la progettazione di siti reattivi perché consente di ridimensionare l'intera pagina modificando la dimensione del carattere nell'elemento HTML.

Unità di lunghezza percentuali in base alle dimensioni della finestra

Il viewport si basa sulla larghezza e sull'altezza del viewport e include:

vh( altezza della finestra);
vw( larghezza della finestra);
vmin ( più piccolo di (vw, vh ));
vmax( il più grande di (vw, vh )).

vw

Questa è la larghezza della finestra. 1vw è uguale a 1/100 della larghezza della finestra. Un po' come le percentuali, tranne per il fatto che il valore rimane lo stesso per tutti gli elementi indipendentemente dalla larghezza dei loro elementi principali. Ad esempio, se la larghezza della finestra è 1000px , 1vw sarà uguale a 10px .

vh

Come vw( larghezza della finestra), solo questa unità di misura dipende dall'altezza della finestra. 1vh è uguale a 1/100 dell'altezza della vista. Ad esempio, se l'altezza della finestra del browser è 900px , 1vh sarà 9px .

vmin

Vmin è 1/100 del valore minimo tra l'altezza e la larghezza della finestra. In altre parole, 1/100 del lato con la lunghezza più corta. Ad esempio, se le dimensioni della finestra 1200 x 800 pixel, quindi vmin sarà 8px .

vmax

vmax è 1/100 del valore massimo tra l'altezza e la larghezza della finestra. In altre parole, 1/100 del lato più lungo. Ad esempio, se le dimensioni fossero 1200 x 800 pixel, quindi vmax è 12px .

Percentuale %

La distanza, espressa in percentuale, dipende dalla lunghezza dell'elemento padre. Ad esempio, se l'elemento padre è largo 1000px e il suo elemento figlio è il 50% di quel valore, la larghezza dell'elemento figlio sarà 500px .

SUPPORTO BROWSER

em CSS, ex, px, cm, mm, in, pt e pc

supportato in tutti i browser, comprese le versioni precedenti di IE.

Uno degli aspetti più confusi cssè l'applicazione dimensione del font attributo per il ridimensionamento del testo. Utilizzando CSS, puoi ridimensionare il testo nel browser utilizzando quattro diverse unità. Quale di queste quattro unità è la migliore per il web? Questa è una domanda che ha generato una varietà di discussioni e critiche. Trovare una risposta definitiva è difficile perché la domanda stessa è complessa.

Incontra - unità

1. "Ems" (em): "em" è un'unità scalabile utilizzata nei documenti web. "em" è uguale alla dimensione del carattere corrente, ad esempio, se la dimensione del carattere del documento è 12pt, 1em è 12pt. "em" è intrinsecamente scalabile, quindi 2em sarebbe uguale a 24pt, 0,5em sarebbe uguale a 6pt e così via. L'uso di "em" sta diventando sempre più popolare nei documenti web grazie alla sua scalabilità e capacità di essere utilmente applicato ai dispositivi mobili.
2. Pixel (px): "px" sono unità di dimensioni fisse utilizzate sugli schermi (ad esempio, per leggere sullo schermo di un computer). Un pixel equivale a un punto sullo schermo di un computer (l'elemento più piccolo della risoluzione dello schermo). Molti web designer utilizzano px nei documenti web per ottenere una rappresentazione pixel-perfetta del proprio sito quando visualizzato in un browser. Uno dei problemi con l'utilizzo di px è che queste unità non consentono lo zoom per lettori ipovedenti o dispositivi mobili.
3. Punti (pt): "pt", tradizionalmente utilizzato nei supporti di stampa (tutto ciò che deve essere stampato su carta, ecc.). Un "pt" è uguale a 1/72 di pollice. "pt", come "px", hanno una dimensione unitaria fissa e non possono essere ridimensionati.
4. Percentuali (%): le unità di misura in % sono simili a "em", fatta eccezione per alcune differenze fondamentali. Innanzitutto, la dimensione del carattere corrente è 100% (cioè 12pt = 100%). Utilizzando "%", il tuo testo diventa completamente scalabile per dispositivi mobili e facilità d'uso (accessibilità).

Allora qual è la differenza?

Sarà facile capire la differenza tra le unità di dimensione dei caratteri quando le vedrai in azione. Come regola generale, 1em = 12pt = 16px = 100%. Con queste dimensioni dei caratteri, vediamo cosa succede quando aumenti la dimensione del carattere di base (usando il selettore del corpo CSS) dal 100% al 120%.

Modifica la dimensione del carattere dal 100% al 120%.

Come puoi vedere, "em" e "%" hanno aumentato la dimensione del carattere, mentre "px" e "pt" no. Impostare una dimensione assoluta per il tuo testo può essere facile, ma è molto meglio che i tuoi visitatori utilizzino testo scalabile che può essere visualizzato su qualsiasi dispositivo o computer. Per questo motivo, è preferibile utilizzare le unità "em" e "%" per il testo del documento web.

"em" vs "%"

Abbiamo scoperto che le unità "px" e "pt" non sono le migliori per i documenti web, il che ci costringe a usare "em" e "%". In teoria, le unità "em" e "%" sono identiche, ma in pratica presentano piccole differenze che è importante considerare.

Nell'esempio sopra, abbiamo usato le percentuali come unità di base della dimensione del carattere (nel tag body). Se modifichi l'unità di base della dimensione del carattere da "%" a "em" (cioè corpo (dimensione carattere: 1em;)), tu, dovrebbe non notare la differenza. Vediamo cosa succede quando "1em" è la nostra unità di base e quando il client cambia la "dimensione del carattere" nelle impostazioni del proprio browser (molti browser come Internet Explorer hanno questa opzione).

La dimensione del carattere quando il client ridimensiona il testo nel browser.

Quando la dimensione del testo è impostata su "media" nel browser del client, non vi è alcuna differenza evidente tra "em" e "%". Tuttavia, se il parametro viene modificato, la differenza diventa molto grande. Quando è impostato su "Più piccolo", "em" è molto più piccolo di "%" e quando è impostato su "Più grande", viceversa, "em" viene visualizzato molto più grande di "%". Mentre molti affermano che le unità in "em" scalano come previsto, in pratica il testo in "em" viene ridimensionato in modo troppo netto, con il testo più piccolo che diventa illeggibile su alcune macchine.

Verdetto

In teoria, le unità "em" sono il nuovo e imminente standard per la dimensione dei caratteri sul Web, ma in pratica le unità "%" consentono agli utenti di visualizzare il testo in modo più coerente e confortevole. Quando si modificano i parametri del cliente, il testo in "%" è cambiato in proporzioni ragionevoli, il che consente ai progettisti di mantenere leggibilità, accessibilità e design.

Vincitore: per cento (%).

CSS3 ha aggiunto nuove unità relative come vh , vw , vmin , vmax . Queste unità sono calcolate in base alle dimensioni della finestra del browser. Per i desktop, la larghezza della finestra del browser è maggiore della larghezza del viewport (aggiungendo la larghezza della barra di scorrimento), quindi se imposti la larghezza di un elemento su 100vw , andrà al di fuori dell'html.

Riso. 1. Immagine di sfondo a schermo intero con larghezza 100vw