px / rem / em -muunnin
Muunna px-, rem- ja em-yksiköiden välillä käyttäen omaa juuren ja kontekstin fonttikokoa – muokkaa mitä tahansa kenttää, ja kaksi muuta päivittyvät reaaliajassa.
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 40 | 2.5 |
| 48 | 3 |
Jokainen muunnos tapahtuu selaimessasi. Mitään kirjoittamiasi tietoja ei lähetetä BroBroGo-palveluun.
UKK
Mitä eroa on px-, rem- ja em-yksiköillä?
px on kiinteä pituus. rem mitataan suhteessa sivun juuren (root) fonttikokoon, joten 16px-juurella 1rem on 16px. em mitataan suhteessa sen elementin fonttikokoon, jossa se sijaitsee. Tekstin ja välien määrittäminen rem-yksiköissä mahdollistaa kaiken skaalautumisen, kun lukija muuttaa selaimensa oletusfonttikokoa.
Miksi em-kontekstille on erillinen koko?
em on suhteessa oman elementtinsä fonttikokoon, joka ei aina ole sama kuin juuri. Aseta em-kontekstiksi kyseisen elementin fonttikoko lukeaksesi em-arvon oikein, ja pidä se samana kuin juuri silloin, kun ne vastaavat toisiaan.
Mitä jos juuren fonttikoko ei ole 16px?
Muuta juuren fonttikoon kenttää vastaamaan CSS-koodiasi, ja jokainen rem-arvo päivittyy heti. Alla oleva pika-taulukko on kätevä opas yleiselle 16px-juurelle, josta useimmat sivustot aloittavat.