Design et responsivt sted med EM-baseret størrelse

Sep 11, 2025

hvordan

Du har sikkert hørt, at du skal bruge relative enheder til skriftstørrelse. Dette er en god regel for tilgængeligt webdesign; Hvis brugeren ændrer deres browsers standard skriftstørrelse, gør det muligt for din sides tekst at ændre størrelsen på. Du har måske taget dette råd og lavede kontakten. Måske har du ud af din regnemaskine og konverterede dit websteds skrifttypestørrelser fra absolutte px enheder til EMS eller mere sandsynligt, REMS.

Men hvis det var, hvor du stoppede, går du glip af meget af den fleksibilitet og magt, som EMS bringer til browseren. EM-enheden er ikke blot en erstatning for den velkendte px ; Du kan bruge det til flere ejendomme end bare skriftstørrelse . Hvis du gør det, begynder nogle af sine andre fordele at dukke op.

Ved konsekvent at bruge EMS kan du designe komponenter på den side, der svarer automatisk, hvis skriftstørrelsen ændres. Derefter kan du med et smart trick til en responsiv skriftstørrelse producere en hel side, der justerer dynamisk baseret på visningsbredden af browseren. Lad mig vise dig, hvordan man udnytter den 'relative' adfærd af EMS for at skabe designs, der er skalerbare og lydhøre.

Skriftstørrelsesenheder

Brug af EMS til skriftstørrelse kan være vanskelig. Den nøjagtige værdi bestemmes af elementets arvede skriftstørrelse (dvs. skriftstørrelsen af moderselskabet). Dette bliver kompliceret, når du begynder at nestende elementer mere dybt. Hvis et element har en skriftstørrelse i EMS, har dens forælder en skriftstørrelse i EMS, og dens forælder har endnu en. Du bliver nødt til at formere alle disse værdier for at bestemme den faktiske beregnede værdi af barnetelementet.

Det betyder, at placeringen af det samme modul i forskellige beholdere kan ændre betydningen af EM. Modulet vil være uforudsigeligt.

For at undgå dette bruger vi typisk en anden relativ enhed til skriftstørrelse: REMS. En REM (eller 'Root EM') er ikke baseret på den arvede skriftstørrelse, men på skriftstørrelsen på sidens rodelement, & lt; html & gt; . Det betyder, at dens værdi er den samme i hele siden. Det er mere forudsigeligt end og ofte foretrukket til regelmæssige EMS.

Opbygge et modul med EMS

Lad os bruge relative enheder til at opbygge et modul. Men vi vil ikke følge den fælles tilgang. I stedet for at bruge REM for alt, vil vi kun bruge det en gang: på det øverste element af modulet. Dette vil etablere en kendt skriftstørrelse for modulet, snarere end at det er baseret på en uforudsigelig kæde af EM-værdier over den i DOM. Det betyder, at vi nemt kan skala størrelsen af modulet ved at overstyres en enkelt værdi.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Brug REMS på det yderste element for at etablere en kendt skriftstørrelse, og brug derefter EMS til at bygge ud fra denne værdi

Når vi etablerer denne kendte skriftstørrelse, er vi sikre at bruge regelmæssige EMS i hele modulet. Brug det ikke kun for nogen skrifttypestørrelser på underelementerne, men også for de fleste andre egenskaber, herunder polstring. Vi margin. og Border-Radius. .

Vi vil bygge et panel med en overskrift og en krop. Markupen ser sådan ud:

 & lt; div class = "panel" & gt;
  & lt; div class = "panel-heading" & gt;
    & lt; h3 & gt; se kraften i EMS & LT; / H3 & GT;
  & lt; / div & gt;
  & lt; div klasse = "panel-krop" & gt;
    Overvej de måder, du kan udnytte relativ på
    enheder til dynamisk dimensionering af dine moduler.
  & lt; / div & gt;
& lt; / div & gt;

Lad os stil den ydre beholder. Vi sætter skriftstørrelsen på 1REM. at etablere vores lokale em-værdi. Vi definerer derefter Border-Radius. ved hjælp af EMS. Jeg kan typisk lide at bruge PX til grænsen, dog for at få en god fin linje.

 .Panel {
  Font-størrelse: 1rem;
  Border: 1px fast # 678;
  Border-radius: 0.3EM;
  Overløb: Skjult;
}

Næste stil de indre elementer. Vi bruger EMS til polstring. Så vil vi øge skriftstørrelsen af overskriften til 1,25 gange vores lokale em-værdi, der producerer en 20px beregnet størrelse.

 .Panel-overskrift {
  Padding: 0.6em 1.2em;
  Baggrundsfarve: #cde;
  Bunden: 1px fast # 678;
}
.Panel-overskrift & GT; h3 {
  Font-størrelse: 1.25EM;
  Margin: 0;
  Brevafstand: 0,03EM;
}
.panel-krop {
  Padding: 0.6em 1.2em;
}

Du kan multiplicere polstringsværdierne ved deres skriftstørrelse for at bestemme deres beregnede værdier (9.6px lodret og 19,2 px vandret). Sandfærdigt, men det betyder ikke noget. Prøv ikke at blive bøjet ned med pixel-perfekte målinger. Dette kan føles akavet, men tryk på på. Jo mere du bruger EMS, jo mere bliver du bekendt med dem som en enhed i deres egen respekt.

Dynamisk skalering af designet

Når vi skaber genanvendelige moduler som dette, finder vi ofte, at vi har brug for et par variationer. Sig, vi ønskede at oprette en større version. Hvis vi brugte PX for alt, ville det betyde at øge skrifttypestørrelsen, polstringen, grænsekradius og så videre. Men fordi vi har defineret alt i forhold til en REM-baseret skriftstørrelse, behøver vi kun at ændre denne værdi, og hele modulet vil reagere:

 .Panel - Stor {Font-Størrelse: 1.2rem; }

Vi tilføjer blot denne klasse til et panel for at gøre det større: & lt; div class = "panelpanel - stor" & gt; . Dette vil ændre den lokale definition af en EM, og dermed også grænseværdierne og polstringsændringerne samt sammen med skriftstørrelsen af sine barnelementer. Med en enkelt erklæring har vi ændret hver del af modulet.

A panel module, with paddings and border radius defined using ems — Et panelmodul, med paddinger og borderradius defineret ved hjælp af EMS

Ligeledes kunne vi skabe en lille version:

 .Panel - Lille {Font-Størrelse: 0.8rem; }

Ved at jordforbindelse af modulet ved hjælp af en topniveau skrifttype i REMS, har vi gjort det stabilt og forudsigeligt. Ved at definere alt andet inden for brug af EMS har vi gjort alle sine komponentdele skalerbare.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Det er muligt at basere størrelsen af alt inde i modulet på en værdi, og derefter ændre den værdi for at skalere det hele

Dette er et kraftigt mønster. Du kan bruge denne tilgang til noget på din side, fra rullemenuer til sociale medier knapper. Ground modulet med en REM-værdi, brug derefter EM til stort set alt andet fra paddings til positionering til ikonstørrelser.

Gør det lydhørt

Lad os skubbe princippet om et niveau yderligere. Vi har størrelsen modulet (og teoretisk alle andre moduler på siden) ved hjælp af REMS og EMS. Dette betyder i sidste ende, at deres størrelse er baseret på rodelementets skriftstørrelse. Derefter kan vi justere denne enkeltværdi for at få hele siden til at reagere igen.

Lad os medbringe en anden relativ enhed: vh. . Denne enheds beregnede værdi er afledt af brugerens skærmstørrelse; Det svarer til 1 procent af bredden af visningsporten. Hvis vi bruger VH-enheden til at definere root-skriftstørrelsen, vil den automatisk skalere responsivt, Sans Media Queries. Indstil skriftstørrelsen på roden til 2VW. :

 HTML {
  Font-størrelse: 2VW;
}

Desværre er effekten lidt for stærk. På en iPhone 6 vil dette for eksempel beregne til 5,5px, hvilket er for lille. Ligeledes er det urimeligt stort på større skærme. For at blødgøre effekten kan vi gøre brug af CSS'er Calc () fungere:

 HTML {
  Font-størrelse: Calc (0.6EM + 1VW);
}

Nu er skriftstørrelsen afledt delvis fra en stabil værdi, og dels fra en lydhør. Dette giver en meget bedre effekt. Det 0.6EM. opfører sig som en slags minimum skriftstørrelse. Nu vil roden EM skalere fluid fra omkring 13px på smartphone til 21px på en gennemsnitlig desktop skærm.

Med din side består af skalerbare moduler, hver jordet til REM-værdien, og de også vil omfatte visningsporten. Siden er struktureret med et tre-tier hierarki; Du kan ændre størrelsen på hele siden, et individuelt modul eller et enkelt element ved at gøre en simpel redigering til skriftstørrelsen. Stol på EMS og REMS, og browseren vil tage sig af arbejdet for dig.

Du skal muligvis stadig tilføje den lejlighedsvise medieforespørgsel for at styre lineindpakning og nogle andre responsive bekymringer. Men denne lille kode kombineret med en vane med at bruge EMS og REMS vil få dig meget af vejen der.

Denne artikel blev oprindeligt fremhævet i Net Magazine. Udgave 288; Køb det her

Relaterede artikler:

10 typografi tricks hver designer skal vide
En designervejledning til typografi og skrifttyper
Master Accessible Web Typografi

Design et responsivt sted med EM-baseret størrelse

Skriftstørrelsesenheder

Opbygge et modul med EMS

Dynamisk skalering af designet

Gør det lydhørt

hvordan - Mest populære artikler

Sådan bruges fotografering til illustration

Sådan tegner du en kat

Byg adaptive layouts uden medieforespørgsler

Sådan opretter du en app med vue.js

Speed sculpt en væsen i zbrush

Lav interaktive 3D-typografi-effekter

Lær at køre design og indholdssprints

Sådan tager du dit vektor logo fra 2D til 3D

Kategorier