Progetta un sito reattivo con il dimensionamento basato su EM

Sep 11, 2025

Come si fa

Probabilmente hai sentito che dovresti usare unità relative per le dimensioni del carattere. Questa è una buona regola per il web design accessibile; Se l'utente cambia la dimensione del carattere predefinito del browser, ciò consente al testo della pagina di ridimensionare di conseguenza. Potresti aver preso questo consiglio e ha reso l'interruttore. Forse hai ottenuto la tua calcolatrice e ha convertito le dimensioni dei font del tuo sito da Assoluto PX. unità a EMS o, più probabile, REMS.

Ma se è qui che ti sei fermato, ti stai perdendo molta flessibilità e il potere che EMS porta al browser. L'unità EM non è semplicemente un sostituto per il familiare PX. ; Puoi usarlo per ulteriori proprietà che solo dimensione del font . Se lo fai, alcuni dei suoi altri benefici iniziano ad emergere.

Usando costantemente l'EMS, è possibile progettare componenti sulla pagina che risponde automaticamente dovrebbe cambiare la dimensione del carattere. Quindi, con un trucco intelligente per una dimensione reattiva del carattere, è possibile produrre un'intera pagina che si adatta alla dinamica basata sulla larghezza del viewport del browser. Lascia che ti mostri come sfruttare il comportamento "relativo" di EMS per creare disegni che sono scalabili e reattivi.

Unità di dimensioni del carattere

L'utilizzo di EMS per la dimensione del carattere può essere complicato. Il valore esatto è determinato dalla dimensione del carattere ereditata dell'elemento (cioè la dimensione del carattere dell'elemento principale). Questo è complicato quando inizi più profondamente gli elementi di nidificazione. Se un elemento ha una dimensione del carattere in EMS, il suo genitore ha una dimensione del carattere in EMS e il suo genitore ne ha ancora un altro. Dovrai moltiplicare tutti questi valori per determinare il valore calcolato effettivo dell'elemento infantile.

Ciò significa che posizionare lo stesso modulo in diversi contenitori potrebbe cambiare il significato di EM. Il modulo sarà imprevedibile.

Per evitare ciò, in genere usiamo un'unità relativa diversa per la dimensione del carattere: REMS. Si basa un rem (o "root em") non si basa sulla dimensione del carattere ereditata, ma sulla dimensione del carattere dell'elemento radice della pagina, & lt; html & gt; . Ciò significa che il suo valore è lo stesso per tutta la pagina. È più prevedibile di, e spesso preferibile, regolarmente EMS.

Costruire un modulo con EMS

Usiamo unità relative per costruire un modulo. Tuttavia, non seguiremo l'approccio comune. Invece di usare rem per tutto, lo useremo solo una volta: sull'alto più elemento del modulo. Ciò stabilirà una dimensione carattere conosciuta per il modulo, piuttosto che basata su una catena imprevedibile di valori di em sopra di esso nel DOM. Significa che possiamo facilmente ridimensionare la dimensione del modulo sovrascrivendo un singolo valore.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Utilizzare REMS sull'elemento più esterno per stabilire una dimensione del carattere conosciuta, quindi utilizzare EMS per costruire in base a quel valore

Dopo aver stabilito questa dimensione carattere conosciuta, siamo sicuri di usare regolarmente EMS in tutto il modulo. Usalo non solo per qualsiasi dimensione dei font sui sottoelementi, ma anche per la maggior parte delle altre proprietà, incluso imbottitura , margine e Border-Radius. .

Costruiremo un pannello con una voce e un corpo. Il markup è simile a questo:

 & lt; div class = "pannello" e gt;
  & lt; div class = "pannello-intestazione" e GT;
    & lt; h3 & gt; ecco il potere di EMS & LT; / H3 & GT;
  & lt; / div & gt;
  & lt; div class = "pannello-body" & gt;
    Considera i modi in cui puoi sfruttare parenti
    Unità per il dimensionamento dinamico dei tuoi moduli.
  & lt; / div & gt;
& lt; / div & gt;

Stile il contenitore esterno. Imposteremo la dimensione del carattere a 1rem per stabilire il nostro valore EM locale. Definiremo quindi il Border-Radius. usando EMS. Ti piace in genere usare px per confine, però, per ottenere una bella linea sottile.

 .panel {
  Font-Dimensione: 1Rem;
  Confine: 1 px solido # 678;
  Border-Radius: 0.3em;
  Overflow: nascosto;
}

Quindi, stile gli elementi interni. Useremo EMS per l'imbottitura. Quindi aumenteremo la dimensione del carattere della rubrica a 1,25 volte il nostro valore EM locale, producendo una dimensione calcolata da 20px.

 .Panel-Heading {
  Imbottitura: 0.6em 1.2em;
  Sfondo-Color: #CDE;
  Border-bottom: 1 px solido # 678;
}
.panel-Heading & GT; H3 {
  Font-Dimensione: 1.25Em;
  Margine: 0;
  LETTER-SPACING: 0.03EM;
}
.panel-body {
  Imbottitura: 0.6EM 1.2EM;
}

È possibile moltiplicare i valori di imbottitura dalla loro dimensione del carattere per determinare i loro valori calcolati (9.6px verticale e 19.2px orizzontale). Tuttavia, però, non importa. Prova a non impantanarsi con le misurazioni perfette del pixel. Questo potrebbe sentirsi imbarazzante, ma premere. Più usi EMS, più diventerai familiarità con loro come unità nel loro stesso rispetto.

Ridimensionare dinamicamente il design

Quando creiamo moduli riutilizzabili come questo, spesso troviamo che abbiamo bisogno di alcune varianti. Dì che volevamo creare una versione più grande. Se stavamo usando PX per tutto, questo significherebbe aumentare la dimensione del carattere, l'imbottitura, il radio-raggio e così via. Tuttavia, poiché abbiamo definito tutto in relazione a una dimensione del carattere basata su REM, è necessario solo modificare quel valore e l'intero modulo risponderà:

 .panel - grande {font-size: 1.2rem; }

Aggiungiamo semplicemente questa classe a un pannello per renderlo più grande: & lt; div class = "pannello panel - grande" e GT; . Ciò cambierà la definizione locale di EM, e quindi anche il raggio di confine e il riempimento del padding, insieme alla dimensione del carattere dei suoi elementi figlio. Con una singola dichiarazione, abbiamo ridimensionato ogni parte del modulo.

A panel module, with paddings and border radius defined using ems — Un modulo pannello, con paddings e raggio di bordo definito utilizzando EMS

Allo stesso modo, potremmo creare una piccola versione:

 .panel - Piccolo {Font-Dimensione: 0.8rem; }

Mettopandosi il modulo utilizzando una dimensione del carattere di alto livello in REMS, lo abbiamo reso stabile e prevedibile. Definendo tutto il resto nell'uso dell'uso di EMS, abbiamo reso tutte le sue parti del componente scalabili.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — È possibile basare la dimensione di tutto all'interno del modulo su un valore, quindi modificare tale valore per ridimensionare tutto

Questo è un modello potente. Puoi usare questo approccio per qualsiasi cosa sulla tua pagina, dai menu a discesa ai pulsanti dei social media. Ground il modulo con un valore REM, quindi utilizzare EM per praticamente tutto il resto dai paddings al posizionamento delle dimensioni dell'icona.

Rendendolo reattivo

Spingiamo ulteriormente il principio del principio. Abbiamo dimensionato il modulo (e teoricamente tutti gli altri moduli sulla pagina) utilizzando REMS ed EMS. In definitiva, in definitiva, la loro dimensione è basata sulla dimensione del carattere dell'elemento root. Quindi, possiamo regolare questo singolo valore per rendere l'intera pagina rispondere a turno.

Portiamoci in un'altra unità relativa: vh. . Il valore calcolato di questa unità deriva dalla dimensione dello schermo dell'utente; È pari al 1% della larghezza della vista. Se utilizziamo l'unità VH per definire la dimensione del carattere principale, ridimensionante automaticamente in relazione, SANS Media Query. Imposta la dimensione del carattere sulla radice a 2vw. :

 HTML {
  Font-Dimensione: 2VW;
}

Sfortunatamente, l'effetto è un po 'troppo forte. Su un iPhone 6, ad esempio, ciò calcolerà a 5.5px, che è troppo piccolo. Allo stesso modo, è irragionevolmente grande su schermi più grandi. Per ammorbidire l'effetto, possiamo usufruire di CSS calc () funzione:

 HTML {
  Font-Dimensione: Calc (0.6em + 1 VW);
}

Ora la dimensione del carattere è derivata in parte da un valore stabile e in parte da uno reattivo. Questo produce un effetto molto migliore. Il 0.6. si comporta come una sorta di dimensione minima del carattere. Ora la radice em ridurrà fluidi da circa 13px sullo smartphone a 21px su uno schermo desktop medio.

Con la tua pagina composta da moduli scalabili, ciascuno di base del valore REM, e anche loro ridimensionano con la vista. La pagina è strutturata con una gerarchia a tre livelli; È possibile modificare la dimensione dell'intera pagina, un singolo modulo o un singolo elemento facendo una semplice modifica alla dimensione del carattere. Fidati dell'EMS e dei REMS, e il browser si prenderà cura del lavoro per te.

Potrebbe essere comunque necessario aggiungere la query dei supporti occasionali per controllare l'avvolgimento della linea e alcune altre preoccupazioni reattive. Ma questo piccolo pezzo di codice combinato con l'abitudine di usare EMS e REMS ti porterà molto la via.

Questo articolo è stato originariamente presente in Magazine netta Edizione 288; Compralo qui

Articoli Correlati:

10 Trucchi di tipografia Ogni designer dovrebbe sapere
Guida di un designer per tipografia e font
Tipografia web Master accessibile

Progetta un sito reattivo con il dimensionamento basato su EM

Unità di dimensioni del carattere

Costruire un modulo con EMS

Ridimensionare dinamicamente il design

Rendendolo reattivo

Come si fa - Articoli più popolari

Costruisci un chatbot AI-Powered

Come creare un licantropo 3D nel motore irreale

Crea paesaggi sbalorditivi a Houdini

Aggiorna le tue trame in Prostanze Designer

Come scolpire un personaggio in VR

Impara a eseguire Design e Content Spriglie

Mock up AR Graphics con After Effects

L'anatomia della caricatura: 15 migliori consigli

Categorie