Share
Il rem unità viene utilizzata per definire i caratteri in termini relativi piuttosto che con una dimensione assoluta in pixel. Ma lo sapevate che questa unità è utile per i layout e anche per la tipografia?
In questo video tutorial del corso sul mio layout CSS, imparerai perché c'è un enorme vantaggio nell'uso rem unità per layout.
Nel corso di layout CSS, tutte le nostre specifiche di layout vengono eseguite utilizzando rem unità. Come abbiamo menzionato in maggior dettaglio nel corso di tipografia, a rem unità è un multiplo della dimensione del carattere di root per la tua pagina.
Il rem l'unità è utile non solo per la tipografia ma anche per il layout, e ti mostrerò il motivo per cui dovresti usarla rem unità quando si imposta il layout.
Iniziamo con uno sguardo alla pagina di esempio su cui stiamo lavorando:
Se poi cambio la dimensione del carattere nel browser, puoi vedere che la dimensione del carattere aumenta sulla pagina:
Ora se continuo ad aumentare la dimensione del carattere e lo aggiorno, ora puoi vedere che l'intero layout è stato adattato per tenere conto della dimensione del carattere più grande.
Tutto è ancora leggibile, ed è possibile perché usando rem unità per impostare il nostro intero layout, ci assicuriamo che tutto sia flessibile a seconda della dimensione del carattere di root del nostro documento, che proviene dalle impostazioni del browser.
Nello stesso senso, se riduco di nuovo le dimensioni del font ad una dimensione veramente piccola e lo aggiorno di nuovo, è possibile vedere l'intero layout ridursi ancora una volta.
Quindi usando questi rem unità, ci assicuriamo che quando un utente cambia le dimensioni del carattere, non solo il testo stesso cambia per adattarsi, ma anche l'intero layout.
Nel corso completo, Inizia qui: impara il layout CSS, metti in pratica ciò che hai imparato in questo video creando una varietà di layout usando rem unità. Imparerai tutto ciò che devi sapere per creare i tipi più comuni di layout nel web design. Tratteremo il dimensionamento, l'allineamento, la spaziatura e le migliori pratiche per la creazione di CSS reattivi.
Se hai appena iniziato e vuoi padroneggiare i CSS, consulta Learn CSS: The Complete Guide.
Oppure puoi sperimentare più corsi della nostra serie "Inizia qui" per i principianti del web design:
Accentsconagua