Design et responsivt sted med em-baseret størrelse

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 sin browsers standard skrifttypestørrelse, giver dette din sides tekst mulighed for at ændre størrelsen i overensstemmelse hermed. Du har muligvis taget dette råd og foretaget kontakten. Måske fik du din lommeregner ud og konverterede dit websteds skrifttypestørrelser fra absolut px enheder til ems eller, mere sandsynligt, rems.

sjov video maker app til Android

Men hvis det er her, du stoppede, går du glip af meget af den fleksibilitet og kraft, som ems bringer til browseren. Em-enheden er ikke blot en erstatning for det velkendte px ; du kan bruge den til flere egenskaber end bare skriftstørrelse . Hvis du gør det, begynder nogle af dets andre fordele at dukke op.



Ved konstant at bruge ems kan du designe komponenter på siden, der reagerer automatisk, hvis skriftstørrelsen ændres. Derefter kan du med et smart trick til en responsiv skriftstørrelse producere en hel side, der justeres dynamisk baseret på browserens visningsbredde. Lad mig vise dig, hvordan du udnytter den 'relative' opførsel af ems til at skabe design, der er skalerbare og lydhøre.



Enheder i skriftstørrelse

Brug af ems til skriftstørrelse kan være vanskelig. Den nøjagtige værdi bestemmes af elementets nedarvede skriftstørrelse (dvs. det overordnede elements skriftstørrelse). Dette bliver kompliceret, når du begynder at indlejre elementer dybere. Hvis et element har en skriftstørrelse i ems, har dets overordnede en skriftstørrelse i ems, og dets overordnede har endnu en anden. Du bliver nødt til at multiplicere alle disse værdier for at bestemme den faktiske beregnede værdi af underordnet element.

Dette betyder, at placering 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, . Dette betyder, at dens værdi er den samme på hele siden. Det er mere forudsigeligt end og ofte at foretrække frem for almindelige ems.

Bygning af et modul med ems

Lad os bruge relative enheder til at opbygge et modul. Vi vil dog ikke følge den fælles tilgang. I stedet for at bruge rem til alt, bruger vi det kun en gang: på modulets øverste element. Dette vil etablere en kendt skriftstørrelse for modulet i stedet for at være baseret på en uforudsigelig kæde af em-værdier over det i DOM. Det betyder, at vi nemt kan skalere størrelsen på modulet ved at tilsidesætte en enkelt værdi.

Brug rems på det yderste element til at etablere en kendt skriftstørrelse, og brug derefter ems til at bygge baseret på denne værdi



Brug rems på det yderste element til at etablere en kendt skriftstørrelse, og brug derefter ems til at bygge baseret på denne værdi

Når vi har etableret denne kendte skriftstørrelse, er vi sikre på at bruge regelmæssige ems i hele modulet. Brug det ikke kun til alle skriftstørrelser på underelementerne, men også til de fleste andre egenskaber, inklusive polstring , margen og grænseradius .

Vi bygger et panel med en overskrift og en krop. Markeringen ser sådan ud:

Behold the power of ems

Consider the ways you can leverage relative units for dynamic sizing of your modules.

Lad os style den ydre beholder. Vi indstiller skriftstørrelsen til 1rem at etablere vores lokale em-værdi. Vi definerer derefter grænseradius ved hjælp af ems. Jeg kan typisk lide at bruge px til kant for dog at få en fin fin linje.

.panel { font-size: 1rem; border: 1px solid #678; border-radius: 0.3em; overflow: hidden; }

Stil derefter de indre elementer. Vi bruger ems til polstring. Derefter øger vi overskriftens skriftstørrelse til 1,25 gange vores lokale em-værdi og producerer en beregnet størrelse på 20 pixel.

.panel-heading { padding: 0.6em 1.2em; background-color: #cde; border-bottom: 1px solid #678; } .panel-heading > h3 { font-size: 1.25em; margin: 0; letter-spacing: 0.03em; } .panel-body { padding: 0.6em 1.2em; }

Du kan gange polstringsværdierne med deres skriftstørrelse for at bestemme deres beregnede værdier (9,6 pixel lodret og 19,2 pixel vandret). Sandfærdigt dog betyder det ikke noget. Forsøg ikke at sætte dig fast med pixel-perfekte målinger. Dette kan føles akavet, men tryk på. Jo mere du bruger ems, jo mere vil du blive fortrolig med dem som en enhed i deres egen respekt.

Photoshop hvordan man vender et billede

Dynamisk skalering af designet

Når vi opretter genanvendelige moduler som denne, finder vi ofte, at vi har brug for et par variationer. Sig, at vi ønskede at oprette en større version. Hvis vi brugte px til alt, ville det betyde at øge skriftstørrelsen, polstringen, kantradiusen 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 svare:

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

Vi tilføjer simpelthen denne klasse til et panel for at gøre det større: . Dette vil ændre den lokale definition af en em, og dermed ændres også kantradius og polstring sammen med fontstørrelsen på dens underordnede elementer. Med en enkelt erklæring har vi ændret størrelsen på alle dele af modulet.

Et panelmodul med polstring og kantradius defineret ved hjælp af ems

Et panelmodul med polstring og kantradius defineret ved hjælp af ems

På samme måde kunne vi oprette en lille version:

.panel--small { font-size: 0.8rem; }

Ved at jordforbinde modulet ved hjælp af en skriftstørrelse på øverste niveau i rems har vi gjort det stabilt og forudsigeligt. Ved at definere alt andet inden for brug af ems har vi gjort alle dets komponentdele skalerbare.

Det er muligt at basere størrelsen på alt inde i modulet på en værdi og derefter ændre denne værdi for at skalere det hele

Det er muligt at basere størrelsen på alt inde i modulet på en værdi og derefter ændre denne værdi for at skalere det hele

Dette er et stærkt mønster. Du kan bruge denne tilgang til hvad som helst på din side, fra rullemenuer til sociale medieknapper. Jord modulet med en remværdi, og brug dem til stort set alt andet fra polstring til positionering til ikonstørrelser.

Gør det lydhørt

Lad os skubbe princippet et niveau længere. Vi har dimensioneret 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 bringe en anden relativ enhed ind: vh . Denne enheds beregnede værdi er afledt af brugerens skærmstørrelse; det er lig med 1 procent af visningsportens bredde. Hvis vi bruger vh-enheden til at definere rod skriftstørrelse, skaleres den automatisk responsivt, sans medieforespørgsler. Indstil skriftstørrelsen på roden til 2vw :

hvordan du ændrer dokumentstørrelse i Photoshop
html { font-size: 2vw; }

Desværre er effekten lidt for stærk. På en iPhone 6 beregnes dette for eksempel til 5,5 pixel, 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-size: calc(0.6em + 1vw); }

Nu stammer skriftstørrelsen dels fra en stabil værdi og dels af en lydhør. Dette giver en meget bedre effekt. Det 0,6 em opfører sig som en slags minimum skriftstørrelse. Nu skal root em skaleres flydende fra ca. 13 px på smartphone til 21 pix på en gennemsnitlig desktopskærm.

Med din side, der består af skalerbare moduler, der hver er jordet til remværdien, og de skaleres også med visningsporten. Siden er struktureret med et tredelt hierarki; du kan ændre størrelsen på hele siden, et individuelt modul eller et enkelt element ved at foretage en simpel redigering af skriftstørrelsen. Stol på ems og rems, og browseren tager sig af arbejdet for dig.

Du skal muligvis stadig tilføje lejlighedsvis medieforespørgsel til at styre linieindpakning og nogle andre responsive bekymringer. Men denne lille smule kode kombineret med en vane med at bruge ems og rems giver dig meget af vejen derhen.

Denne artikel blev oprindeligt omtalt i netmagasin udgave 288; køb det her

Relaterede artikler: