Design et responsivt område med EM-basert liming

Sep 16, 2025

hvordan

Du har sikkert hørt at du bør bruke relative enheter for skriftstørrelse. Dette er en god regel for tilgjengelig webdesign; Hvis brukeren endrer sin nettleserens standard skriftstørrelse, gjør dette at sidens tekst kan endre størrelse tilsvarende. Du har kanskje tatt dette rådet og gjort bryteren. Kanskje du fikk ut kalkulatoren din og konverterte nettstedets skriftstørrelser fra absolutt PX. enheter til EMS eller, mer sannsynlig, REMS.

Men hvis det er der du stoppet, mangler du mye av fleksibiliteten og kraften som EMS bringer til nettleseren. EM-enheten er ikke bare en erstatning for den kjente PX. ; Du kan bruke den til flere eiendommer enn bare skriftstørrelse . Hvis du gjør det, begynner noen av sine andre fordeler å dukke opp.

Ved å konsekvent bruke EMS, kan du designe komponenter på siden som svarer automatisk, hvis skriftstørrelsen endres. Deretter, med et smart trick for en responsiv skriftstørrelse, kan du produsere en hel side som justerer dynamisk basert på nettleserenes visningsporte. La meg vise deg hvordan du kan utnytte den "relative" oppførselen til EMS for å skape design som er skalerbare og lydhør.

Skriftstørrelsesenheter

Bruke EMS for skriftstørrelse kan være vanskelig. Den nøyaktige verdien bestemmes av elementets arvelige skriftstørrelse (dvs. skriftstørrelsen til foreldreelementet). Dette blir komplisert når du begynner å nestede elementer dypere. Hvis et element har en skriftstørrelse i EMS, har foreldrene en skriftstørrelse i EMS, og foreldrene har enda en. Du må multiplisere alle disse verdiene for å bestemme den faktiske beregnede verdien av barnelementet.

Dette betyr at å plassere samme modul i forskjellige beholdere kan endre betydningen av EM. Modulen vil være uforutsigbar.

For å unngå dette bruker vi vanligvis en annen relativ enhet for skriftstørrelse: REMS. En REM (eller "root em") er basert på den arvelige skriftstørrelsen, men på skriftstørrelsen på sidens rotelement, & lt; html & gt; . Dette betyr at verdien er den samme gjennom hele siden. Det er mer forutsigbart enn, og ofte å foretrekke å, vanlige EMS.

Bygge en modul med EMS

La oss bruke relative enheter til å bygge en modul. Imidlertid kommer vi ikke til å følge den vanlige tilnærmingen. I stedet for å bruke REM for alt, vil vi bare bruke den en gang: på det øverste elementet i modulen. Dette vil etablere en kjent skriftstørrelse for modulen, i stedet for at den er basert på en uforutsigbar kjede av EM-verdier over det i DOM. Det betyr at vi enkelt kan skalere størrelsen på modulen ved å overskride en enkelt verdi.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Bruk REMS på det ytre elementet for å etablere en kjent skriftstørrelse, og bruk EMS til å bygge basert på den verdien

Etter at vi har etablert denne kjente skriftstørrelsen, er vi trygge å bruke vanlige EMS gjennom hele modulen. Bruk det ikke bare for noen skriftstørrelser på underelementene, men også for de fleste andre egenskaper, inkludert polstring , margin og Border-Radius .

Vi bygger et panel med en overskrift og en kropp. Markeringen ser slik ut:

 & lt; div class = "panel" & gt;
  & lt; div class = "panel-heading" & gt;
    & lt; h3 & gt; se kraften til EMS & LT; / H3 & GT;
  & lt; / div & gt;
  & lt; div class = "panel-body" & gt;
    Vurder hvordan du kan utnytte i forhold til
    Enheter for dynamisk liming av modulene dine.
  & lt; / div & gt;
& lt; / div & gt;

La oss stille den ytre beholderen. Vi legger skriftstørrelsen på 1rem. å etablere vår lokale EM-verdi. Vi vil da definere Border-Radius bruker EMS. Jeg liker vanligvis å bruke PX for grensen, skjønt, for å få en fin fin linje.

 .Panel {
  FONT-STØRRELSE: 1MEM;
  Border: 1px solid # 678;
  Border-Radius: 0.3 EM;
  Overflow: Skjult;
}

Deretter stil de indre elementene. Vi bruker EMS for polstring. Da vil vi øke skriftstørrelsen på overskriften til 1,25 ganger vår lokale EM-verdi, og produserer en 20px beregnet størrelse.

 .Panel-overskriften {
  polstring: 0.6EM 1.2EM;
  bakgrunnsfarge: #cde;
  Border-bunn: 1px solid # 678;
}
.Panel-overskriften & GT; h3 {
  Font-størrelse: 1.25em;
  margin: 0;
  bokstavsavstand: 0.03em;
}
.Panel-kroppen {
  polstring: 0.6EM 1.2EM;
}

Du kan multiplisere polstringsverdiene med deres skriftstørrelse for å bestemme deres beregnede verdier (9.6px vertikal og 19,2px horisontal). Sannferdig, skjønt, det spiller ingen rolle. Prøv å ikke bli slått ned med pixel-perfekte målinger. Dette kan føles vanskelig, men trykk på. Jo mer du bruker EMS, jo mer vil du bli kjent med dem som en enhet i sin egen respekt.

Dynamisk skalering av designen

Når vi lager gjenbrukbare moduler som dette, finner vi ofte at vi trenger noen variasjoner. Si at vi ønsket å skape en større versjon. Hvis vi brukte PX for alt, ville dette bety å øke skriftstørrelsen, polstring, grenseadius og så videre. Men fordi vi har definert alt i forhold til en REM-basert skriftstørrelse, trenger vi bare å endre verdien, og hele modulen vil svare:

 .Panel - stor {font-size: 1.2rem; }

Vi legger bare til denne klassen til et panel for å gjøre det større: & lt; div class = "panel panel - stor" & gt; . Dette vil endre den lokale definisjonen av en EM, og dermed grensen radius og polstring endres også, sammen med skriftstørrelsen på sine barnelementer. Med en enkelt erklæring har vi endret hver del av modulen.

A panel module, with paddings and border radius defined using ems — En panelmodul, med paddinger og grensestradius definert med EMS

På samme måte kan vi lage en liten versjon:

 .Panel - liten {font-size: 0.8rem; }

Ved å fundere modulen ved hjelp av en toppnivå skriftstørrelse i REMS, har vi gjort det stabilt og forutsigbart. Ved å definere alt annet innenfor å bruke EMS, har vi gjort alle sine komponentdeler 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 mulig å basere størrelsen på alt i modulen på en verdi, og endre den verdien for å skalere alt

Dette er et kraftig mønster. Du kan bruke denne tilnærmingen til noe på siden din, fra rullegardinmenyene til sosiale medier. Groy modulen med en REV-verdi, bruk deretter EM for nesten alt annet fra paddings til posisjonering til ikonstørrelser.

Gjør det responsivt

La oss skyve prinsippet ett nivå videre. Vi har dimensjonert modulen (og teoretisk alle andre moduler på siden) ved hjelp av REMS og EMS. Dette betyr til slutt at deres størrelse er basert på rootelementets skriftstørrelse. Deretter kan vi justere denne enkeltverdien for å få hele siden til å svare igjen.

La oss ta med en annen relativ enhet: vh. . Denne enhetens beregnede verdi er avledet fra brukerens skjermstørrelse; Det er lik 1 prosent av bredden på visningsporten. Hvis vi bruker VH-enheten til å definere rotfonstørrelsen, vil den automatisk skalere responsivt, Sans Media spørringer. Sett skriftstørrelsen på roten til 2VW. :

 html {
  FONT-STØRRELSE: 2VW;
}

Dessverre er effekten litt for sterk. På en iPhone 6, for eksempel, vil dette beregne til 5,5px, som er for lite. På samme måte er det urimelig stort på større skjermer. For å myke effekten, kan vi benytte oss av CSS Calc () funksjon:

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

Nå er skriftstørrelsen avledet delvis av en stabil verdi, og delvis fra en responsiv. Dette gir en mye bedre effekt. De 0.6EM. oppfører seg som en slags minimumsfontstørrelse. Nå vil roten EM skalere fluidly fra ca 13px på smarttelefonen til 21px på en gjennomsnittlig skrivebordsskjerm.

Med siden din består av skalerbare moduler, hver jordet til REV-verdien, og de vil også skalere med visningsporten. Siden er strukturert med et tre-tierhierarki; Du kan endre størrelsen på hele siden, en individuell modul eller et enkelt element ved å lage en enkel redigering til skriftstørrelsen. Stol på EMS og REMS, og nettleseren vil ta vare på arbeidet for deg.

Du må fortsatt legge til sporadisk medieforespørsel for å kontrollere linjeinnpakning og noen andre responsive bekymringer. Men denne lille koden kombinert med en vane med å bruke EMS og REMS, vil få deg mye av veien der.

Denne artikkelen ble opprinnelig omtalt i Net Magazine. utgave 288; Kjøp det her

Relaterte artikler:

10 Typografi Tricks Hver designer bør vite
En designerguide til typografi og fonter
Master Accessible Web Typografi

Design et responsivt område med EM-basert liming

Skriftstørrelsesenheter

Bygge en modul med EMS

Dynamisk skalering av designen

Gjør det responsivt

hvordan - Mest populære artikler

Administrer reagens skjema tilstand med formik

Opprett 3D-tekst i Photoshop: En trinnvis veiledning

Design en spillbar avatar for et videospill

4 tips for å utvikle utviklerens ferdigheter

Hvordan tegne metalliske refleksjoner

Lag utsmykkede fliser i substansdesigner

Mal en episk New York Scene

Hvordan få zbrush-modellen til Maya

Kategorier