logo

Ero em- ja rem-yksiköiden välillä CSS:ssä

Kun asetamme minkä tahansa elementin koon CSS:ssä, meillä on kaksi vaihtoehtoa. Ensimmäinen on absoluuttisia yksiköitä ja toinen suhteellisia yksiköitä. Absoluuttiset yksiköt ovat kiinteitä eivätkä suhteessa mihinkään muuhun. Ne ovat aina identtisiä joka tapauksessa. Ne sisältävät cm, mm, px jne. Toisaalta suhteelliset yksiköt ovat suhteessa johonkin muuhun. Se voi olla pääelementin koko tai pää-HTML:n koko. Suhteelliset yksiköt kattavat em, rem, vw, vh jne. Nämä ovat skaalautuvia yksiköitä ja auttavat reagoivassa suunnittelussa. Monet meistä saattavat hämmentyä suhteellisten yksiköiden välillä, erityisesti sisään ja rem yksiköitä. Puretaan ero näiden kahden välillä. Pohjimmiltaan sekä rem että em ovat skaalautuvia ja suhteellisia kokoyksiköitä, mutta em:llä yksikkö on suhteessa pääelementin kirjasinkokoon, kun taas rem-yksikkö on vain suhteessa HTML-dokumentin juurikirjasinkokoon. R in rem tarkoittaa juuria.

Ymmärretään molemmat yksityiskohtaisesti.



1. Unitedissa: Em-yksikkö mahdollistaa elementin fonttikoon asettamisen suhteessa sen ylätason kirjasinkokoon. Kun pääelementin koko muuttuu, alatason koko muuttuu automaattisesti.

verkon käyttöjärjestelmä

Huomautus: Kun font-size-ominaisuudessa käytetään em-yksiköitä, koko on suhteessa ylätason fontin kokoon. Kun sitä käytetään muissa ominaisuuksissa, se on suhteessa itse elementin kirjasinkokoon. Tässä vain ensimmäinen ilmoitus ottaa vanhemman viittauksen.

  • .child-elementin fonttikoko on 40 pikseliä (2*20px).
  • .lapsen marginaali on 60 pikseliä . Se on 1,5 kertaa elementtimme fonttikoko (1,5 * 40 pikseliä).

Esimerkki: Tämä esimerkki näyttää em-yksikön käytön CSS:ssä.



HTML






> <>html>>>> head>>>> <>title>>Em vs Remtitle> head>