px-rem-muunnin: px, rem, pt, em, mm
Viimeksi päivitetty:
rem lasketaan tästä koosta. Tässä muuntimessa myös em ja % lasketaan siitä. CSS:ssä ne kuitenkin seuraavat yläelementtiä, joten ne vastaavat rem-yksikköä vain silloin, kun mikään yläelementti ei muuta fonttikokoa.
1 px = 0,0625 remKaikki tulokset
Pikataulukko: Pikseli → rem (root em)
| Arvo (px) | Tulos (rem) |
|---|---|
| 1 px | 0,0625 rem |
| 8 px | 0,5 rem |
| 10 px | 0,625 rem |
| 12 px | 0,75 rem |
| 14 px | 0,875 rem |
| 16 px | 1 rem |
| 18 px | 1,125 rem |
| 20 px | 1,25 rem |
| 24 px | 1,5 rem |
| 32 px | 2 rem |
| 48 px | 3 rem |
| 64 px | 4 rem |
Tietoa px-, rem- ja pt-yksiköistä
CSS määrittää 1 tuuman olevan 96 px, joten 1 pt, joka on 1/72 tuumaa, vastaa 1,333 px:ää ja 1 mm vastaa 3,78 px:ää. rem ja em ovat suhteellisia: 1 rem on juurielementin fonttikoko, 16 px kaikissa suurissa selaimissa, ellei käyttäjä muuta sitä, joten 24 px on 1,5 rem. Jos tyylitiedosto asettaa toisen juurikoon, syötä se kenttien yläpuolella olevaan perusfonttikoon kenttään. em seuraa yläelementin fonttikokoa, joten se vastaa rem-yksikköä vain silloin, kun mikään yläelementti ei muuta sitä.
Yleiset teksti- ja elementtikoot
Perusfonttikoko on oletuksena 16 px. CSS määrittää 1 tuuman olevan 96 px, joten pt- ja mm-sarakkeet pätevät millä tahansa perusfonttikoolla. Vain rem-sarake muuttuu sen mukana.
| Koko | rem | pt | mm |
|---|---|---|---|
| 10 pt:n teksti (alaviitteet) | 0,8333 | 10 | 3,528 |
| Selaimen oletustekstikoko | 1 | 12 | 4,233 |
| 12 pt:n teksti tekstinkäsittelyohjelmassa | 1 | 12 | 4,233 |
| h2-otsikon oletuskoko | 1,5 | 18 | 6,35 |
| Pienin kohdekoko WCAG 2.2:ssa (2.5.8) | 1,5 | 18 | 6,35 |
| h1-otsikon oletuskoko | 2 | 24 | 8,467 |
| 1 senttimetri | 2,362 | 28,35 | 10 |
| 1 tuuma | 6 | 72 | 25,4 |
Pisteen ja pikselin historia
Kirjasinkoko mitattiin pisteinä jo kauan ennen näyttöjä: kirjasinvalimot tarvitsivat yhteisen yksikön, jotta niiden valamat kirjaimet sopivat samaan riviin. Tietokoneet vakiinnuttivat pisteen kooksi 1/72 tuumaa.
- Pierre-Simon Fournier julkaisi kirjasinkokojen taulukon, jossa koot mitattiin typografisina pisteinä: asteikko jakoi tuuman 12 linjaan ja jokaisen linjan 6 pisteeseen.
- Yhdysvaltain kirjasinvalimoiden yhdistys (Type Founders' Association of the United States) otti käyttöön pistejärjestelmän kirjasinrungoille, jossa nonpareil on 6 pistettä ja pica 12.
- Adobe esitteli PostScriptin, jonka pituusyksikkö sivulla on 1/72 tuumaa: Adoben sanoin suunnilleen sama kuin painamisessa käytetty piste.
- CSS 2.1:stä tuli W3C:n suositus. Se määrittää 1 tuuman olevan 96 px ja 72 pt, joten 1 px on 0,75 pt. Pikseli vastaa yhtä pistettä 96 dpi:n näytöllä, kun näyttöä katsotaan käsivarren mitan päästä.
Lähteet: