Share
Jeg skal gjøre en feiende uttalelse; piksler har ingen plass i webdesign. Det er bare en grunn til at du fremdeles stoler på piksler - og det er fordi du ikke har fått tak i ems ennå. La oss endre det!
Dekorativ M takket være Frances Mcleod - Vinner av TypeFight # 34 Når vi bygger nettsteder, må vi fortelle nettleseren hvordan "store" ting er: "denne overskriften er så stor", "denne beholderen er yay høy", "dette skjemaet er bredere enn det", det er hvordan vi lager en side. Piksler har alltid gjort perfekt forstand som valgt måleenhet; Vi legger ut på en skjerm, så hva skal vi bruke?!
Det viser seg imidlertid at piksler er iboende ufleksible. Og det viser seg at det er ufleksibel, er ikke bra for nettet.
Oliver Reichenstein uttalte for lenge siden: "Weben er 95% typografi", men det er tatt noen få år for folk å komme om bord med ideen. Innhold og brukere; De er våre prioriteringer som webdesignere, og typografisk design hjelper oss med å møte disse prioritetene.
Nettlesere viser kropps kopi ved en standardstørrelse. På skrivebord er dette vanligvis 16px, mobile nettlesere varierer. Brukere kan endre denne standarden, avhengig av hva de foretrekker.
Ofte vil webdesignere bruke CSS til å kaste basestørrelsen i stein ...
... hindrer brukeren fra å skreddersy sin egen leseopplevelse, noe som til slutt gjør innholdet mindre tilgjengelig.
Leksjon en er å overføre strøm til brukeren. Ikke forhindrer brukerne i å sette sin egen type størrelse, men sørg for at du starter på et jevnt spillfelt. Angi basen font til 100% av nettleserens standard:
så kan vi jobbe derfra.
Vi må fortsatt definere hvor store våre forskjellige typografiske elementer vises, spesielt hvis vi har brukt en CSS reset-teknikk for å fjerne alle standardstørrelser. En ganske typisk modulær skala ville se noe ut som dette:
Disse tallene har blitt brukt i århundrer, beregnet for å optimalisere proporsjoner, uten å fysisk produsere for mange av blokkene som brukes i utskrift. Det er alt slags smart matematikk som rettferdiggjør skalaer som dette, og jeg er sikker på at du kan sette pris på at dette området også er behagelig for øyet.
Vi ville oversette denne skalaen til vår egen typografi ved å bruke CSS litt slik:
Men (som vi allerede har sagt) ved hjelp av faste pixelverdier er ubøyelig, så la oss rette ut det ...
En em er en måleenhet. Akkurat som piksler, kan ems bestemme størrelsen på elementene på en nettside. I motsetning til piksler, som er absolutte, er ems i forhold til foreldrenes skriftstørrelse, som er hvor mye forvirring ligger.
1em er lik den arvede skriftstørrelsen. Hvis skriftstørrelsen på a Ems får navnet sitt fra utskrift. Nøyaktig når begrepet ble brukt først er uklart, men som store bokstaver M (uttalt EMM) står nærmest den firkantede utskriftsblokken der utskriftsbokstaver ble plassert, det kom til å låne sitt navn til målingen. Uansett punktstørrelsen på fonten i spørsmålet, vil blokken i store bokstaver M definere em. En em er vanligvis en touch større enn brevformen, men du får ideen. Vi har allerede begynt å sette vår typografiske skala i piksler, så hvordan konverterer vi det til ems? En enkel beregning, som uttrykker ønsket skriftstørrelse i forhold til kroppens skriftstørrelse: Ved hjelp av kroppsstørrelsen antar vi å være 16px, med sikte på å konvertere vår 36px Slik er skalaen vår konvertert, ved hjelp av metoden ovenfor: Noen av disse verdiene kan få litt kompleks, men vær ikke redd for å være så presise som mulig med desimaltallene. Nettlesere vil alltid gjøre sitt beste for å gjengi de nøyaktige verdiene. Tips: Det er ofte nyttig å legge merke til i kommentarene, for å minne deg på hvordan du har beregnet hver em-verdi. De største største grumble menneskene har med ems kommer fra komplikasjoner som oppstår ved kaskader. En em-verdi er i forhold til nærmeste foreldres verdi, som ved et uhell kan ødelegge ting hvis du ikke betaler oppmerksomhet. Ta en titt på følgende css, som har som mål å få ankre og stykker på størrelse likt: Ta en titt på dette uskyldige oppslaget: Som du forventer, ser alt godt ut i nettleseren. Både avsnittet og ankeret vises ved 1.2em, i forhold til kroppens skriftstørrelse Men hvis vi skulle introdusere et annet anker innenfor avsnittet, la oss se hva som skjer: Ankeret i avsnittet er fortsatt dimensjonert på 1.2em, men det er nå i forhold til overordnet avsnittet, som allerede er 19.2px - Merk: Nestede listeposter i navigasjonsmenyer er et klassisk eksempel på hvor cascading kan komme ut av kontroll - pass på den. Det er ingen løsning for dette; Den siste tingen du vil gjøre er å legge til en ekstra regel for å redusere størrelsen på ankre som måtte være i avsnitt - det er en enkelbillett til Migrainesville. For å holde CSS og HTML vedlikeholdsdyktig, er det viktig å Keep It Simple ™. Det burde hjelpe! Bruk av Ems betyr at du må tenke ganske hard noen ganger, men å gjøre det vil tvinge deg til å rydde opp og være effektiv i kodingen. Rems er nyttige og oppfører seg på nøyaktig samme måte som ems, uten cascading. Hver rem du definerer, er i forhold til kroppens skriftstørrelse. Støtte er ikke så nær så bra, så iE8 og eldre trenger en pikselbasert tilbakelevering. Vi har dekket CSS Det er ingen fast regel for hvor stor linjehøyde skal være, men 1.5em er en rimelig verdi å prøve ut og vil gjøre din typografi behagelig lesbar. Tips: Ta en titt på Bryan Gruhlkes forslag i kommentarene for å bruke enhetsverdier med linjehøyde ... Merk: Ting kan bli kompliserte hvis du prøver å sette et grunnlinje med ems, men det er et emne for en annen artikkel. Når du kommer inn i tankegangen om å holde layoutet ditt fleksibelt med hensyn til skriftstørrelsen, finner du at du stoler på piksler mindre og mindre for å legge ut elementer på siden. Hvis vi snakker om væskeoppsett, bør du bruke% verdier for å bestemme bredden til et gitt element. Piksler bør ikke sees når man bestemmer horisontale dimensjoner. Vertikal avstand kan oppnås veldig enkelt med ems; igjen, det er et spørsmål om å være ren med oppslag og styling. Vurder å begrense marginer til bunn av elementene dine, for å gjøre det enklere å administrere vertikal rytme. Hvis du trenger å definere en Avrundede hjørner på en knapp? Sett Tekstskygge, bokseskygge, ditto. Og hvis du trenger å endre størrelsen på alt under visse omstendigheter, som mindre visninger? Endre basestørrelsen på kroppen i riktig medieforespørsel Som alle gode vitenskapelige regler må det være et unntak for å bevise det. I dette tilfellet kan jeg tenke på ett godt scenario der du kanskje trenger piksler; grenser. Hvis du definerer en grensebredde (eller høyden på en horisontal regel) i ems, kan det hende at den blir beregnet så liten at nettleseren ikke kan gjøre det. I dette tilfellet vil du ikke bare se det. For horisontale regler kan du ha stiler litt slik: For å forhindre at den forsvinner når kroppsstørrelsen er for liten, kan du legge til dette: Der. En piksel. Søren. Borderbredder kan ikke ha en minimumsverdi (dessverre), slik at en lignende sikkerhetskopiering i så fall ikke er mulig. I stedet kan du bruke grensebreddsverdiene for Begynn å bruke ems idag! Innholdet ditt er typografisk jordet, enten du skjønner det eller ikke. Å referere tilbake til piksler er ikke engang nødvendig å konvertere figurer og tenkning i form av faste oppsett. Begynn å tenke på ems, og du vil snart glemme piksler helt og holdent. Hvis du kan tenke på en situasjon der du ikke kan bruke ems, vil jeg gjerne høre det i kommentarene!
En stor M i Calendas Plus - det omkringliggende torget er 1em høyt, 1em bredt Konvertering fra piksler
, vi får:
Problemer med Cascading
(1,2 * 16px = 19,2px).
(1,2 * 19,2px = 23,04px). Dette gir oss ekstra store ankre i enkelte deler av vår side; neppe ønskelig.Fixen
Rems
Hva om å bruke Ems andre steder?
skriftstørrelse eiendom; et fornuftig første skritt i bruk av ems, men nå skal vi se på linjehøyde. Hvis noen gang var det en eiendom som skrik "ikke bruk pikselverdier", er det linjehøyde. Linjens høyde (diskutert under en tidligere artikkel i mer detalj) av et typografisk element skal alltid være i forhold til skriftstørrelsen. Hvis du har en overskrift hvis størrelse er satt i ems, men hvis linjehøyde er angitt i piksler, kan du ende opp med stygg overlapping og et dårlig visuelt forhold generelt.
I dette tilfellet er 1.5em 1,5 * 18px som er 27px Strukturelle elementer
høyde (som kan være vanskelig i fleksible layouter) bruker ems også. Kanskje du bygger en navigasjon og trenger å definere høyden på menylinkene - de skal vokse og krympe med skriftstørrelsen.border-radius bruker ems, så skalerer alt sømløst.
Ta en titt på denne Codepen for et mer visuelt eksempel på hva jeg snakker om her RWD
kropp font-size: 90%; og wham! Hele nettstedet ditt skaleres i løpet av tiden det tar å trykke inn.unntak
Ta en titt på denne dårlige demoen hr høyde: .02em; grense: ingen; bakgrunn: hvit; margin: 2em 0; oversikt: ingen; skjerm: blokk; klare: begge; bredde: 100%;
min høyde: 1px;
tykk, medium og tynn, selv om disse verdiene ikke skaleres med skriftstørrelse noe bedre enn piksler gjør.Konklusjon
Videre lesning
Accentsconagua