Proiectați un loc receptiv cu dimensionarea bazată pe em

Sep 16, 2025

să

Probabil ați auzit că ar trebui să utilizați unități relative pentru dimensiunea fontului. Aceasta este o regulă bună pentru designul web accesibil; Dacă utilizatorul își schimbă dimensiunea implicită a fontului browserului, aceasta permite textul paginii dvs. pentru a redimensiona în consecință. Este posibil să fi luat acest sfat și ați făcut comutatorul. Poate că ați scos calculatorul dvs. și ați convertit dimensiunile fontului site-ului dvs. px. unități la EMS sau, mai probabil, reems.

Dar dacă aici te-ai oprit, lipsește o mulțime de flexibilitate și putere pe care EMS le aduce la browser. Unitatea EM nu este pur și simplu un înlocuitor pentru familia px. ; îl puteți folosi pentru mai multe proprietăți decât doar marimea fontului . Dacă faceți acest lucru, unele dintre celelalte beneficii încep să apară.

Prin utilizarea în mod consecvent a EMS, puteți proiecta componente pe pagina care răspund automat în cazul modificării dimensiunii fontului. Apoi, cu un truc inteligent pentru o dimensiune a fontului receptiv, puteți produce o întreagă pagină care se ajustează dinamic pe baza lățimii de vizualizare a browserului. Permiteți-mi să vă arăt cum să folosiți comportamentul "relativ" al EMS pentru a crea modele care sunt scalabile și receptive.

Unități de dimensiune a fontului

Utilizarea EMS pentru dimensiunea fontului poate fi complicată. Valoarea exactă este determinată de dimensiunea fontului moștenită a elementului (adică dimensiunea fontului elementului părinte). Acest lucru devine complicat atunci când începeți mai profund elemente de cuibărit. Dacă un element are o dimensiune a fontului în EMS, părintele său are o dimensiune a fontului în EMS, iar părintele său are încă un altul. Va trebui să multiplicați toate aceste valori pentru a determina valoarea calculată calculată a elementului copil.

Aceasta înseamnă că plasarea aceluiași modul în recipiente diferite ar putea schimba semnificația em. Modulul va fi imprevizibil.

Pentru a evita acest lucru, utilizăm de obicei o unitate relativă diferită pentru dimensiunea fontului: remediere. O REM (sau "ROOT EM") se bazează pe dimensiunea moștenită a fontului, ci pe dimensiunea fontului elementului rădăcinii paginii, & lt; html & gt; . Aceasta înseamnă că valoarea sa este aceeași pe tot parcursul paginii. Este mai previzibilă decât, adesea preferabilă, EMS regulată.

Construirea unui modul cu EMS

Să folosim unități relative pentru a construi un modul. Cu toate acestea, nu vom urma abordarea comună. În loc să folosiți REM pentru tot, o vom folosi o singură dată: pe cel mai mare element al modulului. Aceasta va stabili o dimensiune cunoscută a fontului pentru modul, mai degrabă decât se bazează pe un lanț imprevizibil al valorilor EM deasupra acesteia în DOM. Înseamnă că putem scala cu ușurință dimensiunea modulului prin depășirea unei singure valori.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Utilizați reems pe elementul exterior pentru a stabili o dimensiune cunoscută a fontului, apoi utilizați EMS pentru a construi pe baza acestei valori

După ce vom stabili această dimensiune cunoscută a fontului, suntem siguri de a utiliza EMS regulate pe tot modulul. Utilizați-l nu numai pentru dimensiunile de fonturi pe sub-elemente, ci și pentru cele mai multe alte proprietăți, inclusiv padding. , Marja. și Raza de frontieră .

Vom construi un panou cu o poziție și un corp. Markupul arată astfel:

 & lt; div clasa = "panou" & gt;
  & lt; div Clasa = "titlul panoului" & GT;
    "H3 & GT; Iată puterea EMS & LT; / H3 & GT;
  & lt; / div & gt;
  & lt; div clasa = "panou-corp" & gt;
    Luați în considerare modul în care puteți influența relativ
    unități pentru dimensionarea dinamică a modulelor dvs.
  & lt; / div & gt;
& lt; / div & gt;

Să formăm recipientul exterior. Vom seta dimensiunea fontului la 1REM. pentru a stabili valoarea noastră de em locală. Atunci vom defini apoi Raza de frontieră folosind EMS. De obicei, îmi place să folosesc Px pentru frontieră, totuși, pentru a obține o linie frumoasă frumoasă.

 .panel {
  font-dimensiune: 1rem;
  Frontieră: 1px solid # 678;
  Raza de frontieră: 0,3em;
  Depășirea: ascunsă;
}

Apoi, stilul elementelor interioare. Vom folosi EMS pentru căptușeală. Apoi vom crește dimensiunea fontului de la rubrica la 1,25 ori la valoarea noastră locală EM, producând o dimensiune de 20px calculată.

 Panoul-titlu {
  Padding: 0.6Em 1.2em;
  Culoare de fundal: #CDE;
  Border-fund: 1px solid # 678;
}
.Panel-titlul & GT; H3 {
  Font-dimensiune: 1.25EM;
  Marja: 0;
  Spațierea scrisorii: 0,03em;
}
.Panel-corp {
  Padding: 0.6Em 1.2em;
}

Puteți multiplica valorile de umplere prin dimensiunea fontului pentru a determina valorile lor calculate (9.6px vertical și 19.2px orizontal). Cu adevărat, totuși, nu contează. Încercați să nu vă îmbogățiți cu măsurători ale pixelului. Acest lucru se poate simți ciudat, dar apăsați pe. Cu cât folosiți mai mult EMS, cu atât mai mult veți fi familiarizați cu ei ca o unitate în propriul lor respect.

Scalarea dinamică a designului

Când creăm module reutilizabile, de multe ori găsim că avem nevoie de câteva variante. Spune că am vrut să creăm o versiune mai mare. Dacă folosim Px pentru tot, acest lucru ar însemna creșterea dimensiunii fontului, a căptușelii, a razei de frontieră și așa mai departe. Cu toate acestea, pentru că am definit totul în legătură cu o dimensiune a fontului bazat pe REM, trebuie doar să schimbăm această valoare, iar întregul modul va răspunde:

 .panel - mare {font-dimensiune: 1,2rem; }

Pur și simplu adăugăm această clasă la un panou pentru al face mai mare: & Lt; div Clasa = "panou panou - mare" & gt; . Acest lucru va schimba definiția locală a unui EM și, prin urmare, raza de frontieră și schimbările de padding, împreună cu dimensiunea fontului elementelor copilului. Cu o singură declarație, am redimensionat fiecare parte a modulului.

A panel module, with paddings and border radius defined using ems — Un modul de panou, cu garnituri și raza de frontieră definită utilizând EMS

De asemenea, am putea crea o versiune mică:

 .panel - mic {font-dimensiune: 0,8rem; }

Prin împământarea modulului utilizând o dimensiune a fontului de nivel superior în Rems, am făcut-o stabilă și previzibilă. Prin definirea întregii altceva în utilizarea EMS, am făcut toate componentele sale scalabile.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Este posibil să se bazeze dimensiunea totului în interiorul modulului pe o singură valoare, apoi să schimbați această valoare pentru a scala totul

Acesta este un model puternic. Puteți utiliza această abordare pentru orice pe pagina dvs., de la meniuri drop-down la butoanele sociale media. Împământați modulul cu o valoare REM, apoi utilizați-le pentru aproape orice altceva din garniturile la poziționarea la dimensiunile pictogramelor.

Făcându-l receptiv

Să împingem principiul pe un nivel mai departe. Am mărturisit modulul (și teoretic toate celelalte module de pe pagină) utilizând REMS și EMS. Acest lucru înseamnă, în cele din urmă, dimensiunea lor se bazează pe dimensiunea fontului elementului rădăcină. Apoi, putem ajusta această valoare unică pentru a face ca întreaga pagină să răspundă la rândul său.

Să aducem o altă unitate relativă: vh. . Valoarea calculată a acestui aparat este derivată din dimensiunea ecranului utilizatorului; Este egal cu 1% din lățimea de vizualizare. Dacă folosim unitatea VH pentru a defini dimensiunea fontului rădăcinii, acesta va scădea automat în mod repetat, SANS interogări media. Setați dimensiunea fontului pe rădăcină la 2VW. :

 HTML {
  Font-dimensiune: 2VW;
}

Din păcate, efectul este puțin prea puternic. Pe un iPhone 6, de exemplu, acest lucru va calcula la 5.5px, ceea ce este prea mic. De asemenea, este nerezonabil de mare pe ecrane mai mari. Pentru a înmuia efectul, putem folosi CSS-ul Calc () funcţie:

 HTML {
  Dimensiune font: calc (0,6em + 1VW);
}

Acum, dimensiunea fontului este derivată parțial de o valoare stabilă și parțial de la una receptivă. Acest lucru produce un efect mult mai bun. 0.6EM. se comportă ca un fel de dimensiune minimă a fontului. Acum, rădăcina EM va scala fluid de la aproximativ 13px pe smartphone la 21px pe un ecran de desktop mediu.

Cu pagina dvs. formată din module scalabile, fiecare împământat la valoarea REM și și ele vor scala cu suportul de vizualizare. Pagina este structurată cu o ierarhie cu trei niveluri; Puteți modifica dimensiunea întregii pagini, un modul individual sau un singur element, făcând o editare simplă la dimensiunea fontului. Încredeți EMS și Rems, iar browserul va avea grijă de lucrarea pentru dvs.

Este posibil să fie necesar să adăugați interogarea ocazională pentru a controla ambalarea liniei și alte preocupări responsabile. Dar acest mic pic de cod combinat cu un obicei de a folosi EMS și Rems vă va aduce o mulțime de drum acolo.

Acest articol a fost inițial prezentat în revista netă Ediția 288; Cumpărați-l aici

Articole similare:

10 trucuri de tipografie Fiecare designer ar trebui să știe
Ghidul unui designer pentru tipografie și fonturi
Tipografie web accesibilă accesibilă

Proiectați un loc receptiv cu dimensionarea bazată pe em

Unități de dimensiune a fontului

Construirea unui modul cu EMS

Scalarea dinamică a designului

Făcându-l receptiv

să - Cele mai populare articole

Explorați vizualizarea datelor cu p5.js

Cum se creează ochi spumante în vopsea de ulei

Creați un interior primitor folosind linia de artă

Creați mișcare dinamică într-o compoziție

Cum de a picta o urbană cu blocuri de culoare

Cum să ilustreze pentru un eveniment

Tutorial text 3D pentru designeri grafici

Vopsea o scenă epică New York

Categorii