Hvað þessi breytir gerir
Þessi breytir umbreytir gildum milli px, rem og em — og öfugt. Þú getur slegið inn tölu í hvaða reit sem er af þessum þremur, og hinir tveir reitirnir reiknast og birtast sjálfkrafa. Auk þess getur þú stillt þína eigin grunnstærð leturs og em-samhengisstærð, svo umbreytingarnar passi nákvæmlega við þína hönnun.
Verkfærið hentar þeim sem þurfa að breyta föstum px-gildum í hlutfallslegar rem- eða em-einingar fyrir sveigjanlega (responsive) hönnun, þeim sem vilja átta sig á því hvernig mismunandi grunnstærðir leturs hafa áhrif á rem-gildi, þeim sem þurfa að reikna em-gildi út frá leturstærð tiltekins einingar, og þeim sem vilja tryggja að stærðir skalist rétt þegar lesandi breytir sjálfgefinni leturstærð sinni.
Hver umbreyting keyrir í vafranum þínum. Engu sem þú slærð inn er hlaðið upp á BroBroGo.
Reitirnir þrír og sjálfgefin gildi
Efst eru tveir stillanlegir reitir: „Grunnstærð leturs (root px)“ og „em samhengisstærð leturs (px)“. Þar fyrir neðan er reiturinn „Gildi“, þar sem þú slærð inn töluna sem á að breyta — hvort sem hún er í px, rem eða em. Sjálfgefin grunnstærð leturs er 16px og sjálfgefin em-samhengisstærð er líka 16px, þannig að í upphafi jafngildir 16px bæði 1rem og 1em.
Þegar þú breytir hvaða reit sem er af þessum þremur — px, rem eða em — uppfærast hinir tveir jafnóðum og þú skrifar. Verkfærið leyfir líka neikvæð px-gildi í reitnum „Gildi“.
Ef þú slærð inn gildi sem er ekki tala í reitinn „Gildi“ birtast skilaboðin „Sláðu inn tölu til að breyta.“. Grunnstærð leturs verður að vera tala stærri en 0 — annars birtast skilaboðin „Grunnstærð leturs (root) verður að vera tala stærri en 0.“. Sama gildir um em-samhengisstærðina: hún verður að vera tala stærri en 0, annars birtast skilaboðin „em samhengisstærð leturs verður að vera tala stærri en 0.“.
Munurinn á px, rem og em
px er föst lengdareining sem breytist ekki eftir samhengi. rem er hins vegar mælt gagnvart grunnstærð leturs síðunnar — við sjálfgefna 16px grunnstærð jafngildir 1rem 16px. em er mælt gagnvart leturstærð þeirrar einingar sem það sjálft liggur í, svo sama em-gildi getur þýtt ólíkan fjölda pixla eftir því hvar það er notað.
Þessi munur skiptir máli fyrir sveigjanlega og aðgengilega hönnun: þegar letur og bil eru skilgreind í rem eða em getur allt á síðunni stækkað eða minnkað í takt þegar lesandi breytir sjálfgefinni leturstærð í vafranum sínum, í stað þess að vera læst við fasta px-tölu.
Grunnstærð leturs: áhrif á rem-gildin
Reiturinn „Grunnstærð leturs (root px)“ stýrir því hvernig px breytist í rem. Ef þú slærð til dæmis inn 24 í reitinn „Gildi“ meðan grunnstærðin er 16px, sýnir breytirinn 1.5rem — því 24 deilt með 16 er 1.5. Breytir þú grunnstærðinni, til dæmis niður í 20px, endurreiknast rem-gildið samstundis miðað við nýju grunnstærðina.
Þetta gerir reitinn gagnlegan þegar CSS-kóðinn þinn notar aðra grunnstærð en 16px: þú stillir reitinn á sömu tölu og í kóðanum þínum, og öll rem-gildi sem breytirinn sýnir passa við þá stillingu.
Samhengisstærð fyrir em og taflan yfir algeng gildi
em-samhengisstærðin er sér reitur vegna þess að em miðast við leturstærð eigin einingar, sem er ekki alltaf sú sama og grunnstærðin. Ef til dæmis samhengisstærðin er stillt á 20px og þú slærð inn 30 í reitinn „Gildi“, sýnir breytirinn 1.5em — því 30 deilt með 20 er 1.5. Stilltu samhengisreitinn á leturstærð einingarinnar sem þú ert að vinna með, og haltu honum jöfnum grunnstærðinni þegar þær eiga að vera eins.
Fyrir neðan umbreytingarreitina er taflan „Algeng px → rem (16px grunnur)“, sem sýnir röð af px-gildum umbreytt í rem miðað við 16px grunnstærð — góður leiðarvísir þegar síðan þín byrjar með þá algengu grunnstærð, óháð því hvaða tölu þú hefur slegið inn í reitinn „Grunnstærð leturs (root px)“ fyrir eigin útreikninga.
Algengar spurningar
Hver er munurinn á px, rem og em?
px er föst lengd. rem er mælt gagnvart grunnstærð leturs síðunnar (root), þannig að við 16px grunnstærð jafngildir 1rem 16px. em er mælt gagnvart leturstærð þeirrar einingar sem það liggur í. Með því að skilgreina letur og bil í rem getur allt stækkað eða minnkað þegar lesandi breytir sjálfgefinni leturstærð í vafranum sínum.
Af hverju er sérstök em-samhengisstærð?
em miðast við leturstærð eigin einingar, sem er ekki alltaf grunnstærðin. Stilltu em-samhengið á leturstærð þeirrar einingar til að lesa em-gildið rétt, og hafðu það jafnt og grunnstærðina þegar þau passa saman.
Hvað ef grunnstærð letursins hjá mér er ekki 16px?
Breyttu reitnum fyrir grunnstærð leturs (root) til að passa við CSS-kóðann þinn og hvert rem-gildi uppfærist samstundis. Flýtitaflan hér að neðan er gagnlegur leiðarvísir fyrir algenga 16px grunnstærð sem flestar síður byrja með.