CSS üksuse lahing: EMid vs. REMS ... VÕITLE! ?

tl; dr ära * lihtsalt * kasuta px-d

CSS üksuse lahing: EMid vs. REMS ... VÕITLE! ?

“Kaks üksust sisenevad! Üks üksus lahkub ... ”- ThunderDOM

Enne artikli juurde jõudmist tahan lihtsalt jagada, et ehitan toodet, ja tahaksin koguda mõningaid andmeid selle kohta, kuidas veebiarendajaid paremini teenindada. Lõin enne või pärast selle artikli lugemist lühikese küsimustiku. Palun kontrollige seda - aitäh! Ja nüüd, tagasi meie tavapärase kavandatud programmeerimise juurde.

Kogun veebipõhistest õppevahenditest mõned andmed selle kohta, mida veebiarendajad vajavad, ja sooviksin teie vastuseid saada. Iga küsimuse kirjeldusse lisasin oma vastused, et saaksite ka mind paremini tundma õppida! Kas on ~ 15 küsimust? //t.co/qvGU3dF0DB.

- kasutajanimi [ZAYDEK] (@username_ZAYDEK) 8. märts 2019

Kes võidaks võitluses?

- kasutajanimi [ZAYDEK] (@username_ZAYDEK) 13. aprill 2018

Tere! ? Olen Zaydek ja olen siin selleks, et anda kätt HTML-i ja CSS-i õppimisel. Selles artiklis uurime erinevust „em” ja „rem” üksuste vahel ning tuletame mõistmist esimestest põhimõtetest.

Kui ma esimest korda HTML-i ja CSS-i õppisin, oli see valus maailm, sest sain põhitõdedest valesti aru. Olles õppinud mulle veebi, tahaksin jagada mõnda teadmist ja julgustust, sest see võib olla lihtsam kui te ette kujutate.

Samuti õpetasin Scrimba kohta tasuta HTML / CSS-i kursust, kus õpetan, kuidas ehitada ilusat blogi * nullist *. Registreerumiseks klõpsake siin! ?

Scrimba.com on interaktiivne esiotsa platvorm, kus veebisaidid salvestatakse sündmustena - mitte videotena - ja neid saab redigeerida! ?

Nende üksus

Emil on huvitav etümoloogia. emtähistab pahaaimamatult tähte “M”.

See tundub rekursiivne, kas pole? Kuidas saavad nad ise viidata? See on nii kaval ... nii peen. Noh, em - nagu me seda CSS-is teame - ei tähista tähte “m”, vaid suhet oma vanema omadega font-size.

Oletame, et määratleme:

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

Siin on määratletud a wrapperkahe spanelemendiga, millel mõlemal pole sisu. Nii et meie veebisait on kohutav! Aga mida me saame teha, on anda oma spanelementidele tekst, mis näitab emtoimimist:

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

Oleme just oma spanelementidele teksti lisanud . Ja teksti renderdatakse erinevas suuruses 40pxja 30px. Olgem määrata wrapperfont-sizekuni 20pxja seejärel Refactor meie .aja .bfont-sizekasutades em.

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

Mida? Meie lõiked font-sizeon ümber pööratud! Nüüd saame hakata uurima, kuidas see emtoimib. Kui me määratletud font-sizekui 20px, 1emtähendaks 1 * 20px. Nii 1emon omamoodi mõttetu.

Kuid meie CSS-is määratlesime .afont-sizekui 1.5emja .bfont-sizekui 2.0em. Arvestades, et nende vanem on 20px, hindavad need väljendid 30pxja 40px. Niisiis, vastupidi!

Kasutamise vastu on vastuväideem.Kui me oleksime määranud mitu vanemat, näiteks elemendid elementide sees, millest igaühel on oma em määratletud font-size, ei ole mõistlik kindlaks teha, mis on laps font-size.

Remiüksus

remon juur em . Ja see gremon Groot em-i jaoks, mida pole olemas.

Nii et an emon selle algelemendi kordaja, font-sizesamas remkui juurelemendi kordaja font-size. Juur?

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

See on meie veebisait - puu! - "tagurpidi" puu!

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

Siin me oleme asendatakse .wrapperkoos html, sest nüüd me kasutame rem. Arvestades seda, .aja .bnüüd pärivad font-sizealates htmlelement, nagu peaks meie .wrapper.

Pange tähele, et midagi pole muutunud - meie veebisait on identne, kuid me oleme rikkunud emvanema ja lapse suhted remjuure ja lapse vaheliste suhetega.

Veelgi enam, saame htmlelemendi asendada pseudoklassiga:

:root { font-size: 20px; }

Jällegi - identne, kuid semantiline. Niisiis, remerineb sellest em, et vanema pärimise asemel font-sizehüppab see elemendile htmlvõi :rootelemendile. Mis siis, kui me muutuksime:rootfont-size :

:root { font-size: 15px; }

Mis juhtus? Meie oma spanon 25% väiksem - hinnates 22.5pxja 30px- kuna me muutsime :rootfont-size. Ja see on vinge idee. Sest me ei saa CSS-i kirjutada mitte reeglites, vaid suhetes.

Võtame kokku: me kasutame selleks, emet luua madal suhe elemendi lähima vanemaga, mis hindab a-d, font-sizesamas kui me kasutame remselle jaoks sügava suhte loomiseks :root.

Em ja rem + meedia päringud

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.

Lõppmärkus : emja remmitte ainult font-size. Me võime kasutada emja remkirjeldada width, heightkus CSS eeldab suurust. Selle ühendamine meediapäringutega teeb meist CSS-i superkangelased.

HTML-i ja CSS-i õppimine ei pea olema valus - see võib olla peen ja need keeled võivad olla üsna võimsad. Ja em, remja gremon mõned kõige võimsam ühikut meie käsutuses saame kasutada kujundada veebilehed.

Ärge unustage, et Scrimbas on tasuta kursus, kus õpetan, kuidas teha sama veebisaiti * nullist *. Registreerumiseks klõpsake siin! ?