CSS Unit Battle: EMs Vs. REM'er ... KÆMP! ?

tl; dr brug ikke * bare * px

CSS Unit Battle: EMs Vs. REM'er ... KÆMP! ?

“To enheder kommer ind! Én enhed forlader ... ”–ThunderDOM

Før jeg kommer til artiklen, vil jeg bare fortælle, at jeg bygger et produkt, og jeg vil meget gerne samle nogle data om, hvordan man bedre kan betjene webudviklere. Jeg oprettede et kort spørgeskema til at tjekke ud før eller efter at have læst denne artikel. Tjek det venligst - tak! Og nu, tilbage til vores regelmæssige planlagte programmering.

Jeg indsamler nogle data om, hvad webudviklere har brug for fra webbaserede uddannelsesværktøjer, og jeg vil meget gerne have dine svar. I beskrivelsen for hvert spørgsmål har jeg inkluderet mine egne svar, så du også kan lære mig bedre at kende! Der er ~ 15 spørgsmål? //t.co/qvGU3dF0DB.

- brugernavn [ZAYDEK] (@username_ZAYDEK) 8. marts 2019

Hvem vinder i en FIGHT?

- brugernavn [ZAYDEK] (@username_ZAYDEK) 13. april 2018

Hej! ? Jeg er Zaydek, og jeg er her for at give en hånd i at lære HTML og CSS. I denne artikel undersøger vi forskellen mellem "em" og "rem" enhederne og udleder forståelse fra de første principper.

Da jeg først lærte HTML og CSS, var det en verden af ​​smerte, fordi jeg misforstod det grundlæggende. Efter at have lært mig noget web, vil jeg gerne dele lidt indsigt og opmuntring, fordi det kan være lettere end du forestiller dig.

Jeg underviste også i et gratis HTML / CSS-kursus på Scrimba, hvor jeg lærer at opbygge en smuk blog fra * bund *. Klik her for at tilmelde dig! ?

Scrimba.com er en interaktiv frontend-platform, hvor websteder registreres som begivenheder - ikke videoer - og kan redigeres! ?

Em-enheden

Em har en interessant etymologi. emintetanende står for “M”.

Dette virker rekursivt, ikke? Hvordan kan em være selv-henvisninger? Det er så listigt ... så subtilt. Nå em - som vi kender det i CSS - repræsenterer ikke “m” -karakteren, men et forhold til forældrenes font-size.

Sig, vi definerer:

   …  .a { font-size: 40px; } .b { font-size: 30px; } 

Her har vi defineret a wrappermed to spanelementer, hver uden indhold. Så vores hjemmeside er forfærdelig! Men hvad vi kan gøre er at give vores spanelementer noget tekst for at demonstrere, hvordan det emfungerer:

 … hello from inside .a hello from inside .b …

Vi har lige tilføjet tekst til vores spanelementer. Og teksten gengives i forskellige størrelser, 40pxog 30px. Lad os indstille wrapperfont-sizetil 20px, og derefter omformulere vores .aog .bfont-sizebruge em.

 …  .wrapper { font-size: 20px; } .a { font-size: 1.5em; } .b { font-size: 2.0em; }  …

Hvad? Vores afsnit font-sizeer vendt! Nu kan vi begynde at undersøge, hvordan det emfungerer. Havde vi defineret font-sizesom 20px, 1emville betyde 1 * 20px. Det 1emer også meningsløst.

Men i vores CSS definerede vi .afont-sizesom 1.5emog .bfont-sizesom 2.0em. I betragtning af at deres forælder er det 20px, vurderes disse udtryk derfor til 30pxog 40px. Så det modsatte!

Der er en indsigelse mod at brugeem.Havde vi defineret flere forældre, såsom elementer inde i elementer, hver med deres egne em definerede font-size, bliver det uintuitivt at bestemme, hvad barnet font-sizeer.

Rem-enheden

remer til root em . Og gremer for Groot em - som ikke findes.

Så en emer en multiplikator af dets overordnede element, font-sizemens remen multiplikator af dens rodelement er font-size. Rod?

 html <- root / \ head body / \ … …

Dette er hvad vores hjemmeside er — et træ! —En ”op og ned” træ!

 …  html { font-size: 20px; } .a { font-size: 1.5rem; } .b { font-size: 2.0rem; }  …

Her har vi erstattet .wrappermed html, for nu bruger vi det rem. I betragtning af dette, .aog .bnu arver deres font-sizefra htmlelementet, som det antages for vores .wrapper.

Bemærk, at intet er ændret - vores websted er identisk, men vi har brudt et forhold mellem emforældre og barn med et remrod-barn- forhold.

Endnu mere kan vi erstatte htmlelementet med en pseudoklasse:

:root { font-size: 20px; }

Igen - identisk, men semantisk. Så remadskiller sig fra, emfordi det i stedet for at arve forældrenes font-sizespringer til elementet htmleller :root. Hvad hvis vi skulle ændre:rootfont-size :

:root { font-size: 15px; }

Hvad skete der? Vores spaner 25% mindre - vurderer til 22.5pxog 30px- fordi vi ændrede :rootfont-size. Og dette er en fantastisk idé. Fordi vi kan skrive CSS ikke i regler, men i forhold.

Lad os sammenfatte: vi bruger emtil at skabe et lavt forhold til elementets nærmeste forælder, der evaluerer en, font-sizemens vi bruger remtil at skabe et dybt forhold til :root.

Em og rem + medieforespørgsler

An even more awesome idea than how we use em and rem is using them in tandem for media queries. Media queries allow us to override CSS in some circumstance, such as the website’s width.

For example:

 …  p { color: green; } @media (max-width: 8.5in) { p { color: blue; } }  …

Here p renders green, but if the width is at or less than 8.5in, the same p reads blue. And we can go a step further than this: instead of using media queries for color, we can use them for font-size:

 …  :root { font-size: 20px; } .a { font-size: 1.5rem; } .b { font-size: 2.0rem; } @media (max-width: 650px) { :root { font-size: 3vw; } }  …

If our website is rendered at or less than 650px, our em and rem inherit their font-size not as 20px but 3vw, or 3% our viewport’s width. Having done so, we’ve connected our CSS as opposed to siloing it.

En sidste note : emog remer ikke begrænset til font-size. Vi kan bruge emog remtil at beskrive widthheighthvor CSS forventer en størrelse. At sammensætte dette med medieforespørgsler gør os til CSS-superhelte.

At lære HTML og CSS behøver ikke at være smertefuldt - det kan være subtilt, og disse sprog kan være ret stærke. Og em, remog gremer nogle af de mest magtfulde enheder til vores rådighed, vi kan bruge til at designe websteder.

Glem ikke, at der er et gratis kursus på Scrimba, hvor jeg lærer at lave det samme websted fra * bund *. Klik her for at tilmelde dig! ?