CSS Yksikkö Muunnin

Muunna px-, rem-, em-, pt-, vw-, vh- ja %-arvoja välittömästi oman peruskirjasinkoon ja näkymäalueen mittojen avulla – ei enää arvailua siitä, mitä 1.5rem todellisuudessa on pikseleinä.

Auttoiko tämä laskuri sinua?

Mikä on CSS Yksikkö Muunnin?

CSS tukee useita eri yksikköjä koon määritykseen – absoluuttisia kuten px ja pt sekä suhteellisia kuten rem, em, vw, vh ja %. Suhteelliset yksiköt ovat välttämättömiä responsiivisessa ja saavutettavassa suunnittelussa (erityisesti rem kunnioittaa käyttäjän selaimen kirjasinkokoa), mutta niiden välinen muuntaminen päässä on todella vaikeaa, koska tulos riippuu kontekstista: juurialkion kirjasinkoosta, nykyisen alkion kirjasinkoosta tai näkymäalueen mitoista. Tämä muunnin laskee sen puolestasi: aseta peruskirjasinkoko, näkymäalueen mitat ja muunnettava arvo, niin näet vastaavan arvon kaikissa muissa yksiköissä heti – hyödyllinen suunnittelumallin pikselimittojen muuntamiseen responsiivisiksi rem/vw-arvoiksi tai olemassaa olevan CSS-säännön tosiasiallisen renderöinnin tarkistamiseen näytöllä.

Milloin käyttää tätä laskuria

  • Kun muunnat suunnittelijan pikselipohjaisen spesifikaation responsiivisiksi rem- tai vw-arvoiksi CSS:ään
  • Kun tarkistat, mitä vw-pohjainen responsiivinen kirjasinkoko todella renderöi tietyllä näytön leveydellä
  • Kun muunnat vanhan pt-pohjaisen printti- tai sähköposti-CSS:n verkossa käytettäväksi px- tai rem-yksiköksi
  • Kun tarkistat, yhteneekö design-järjestelmän väliasteikko puhtaasti eri yksiköiden välillä
  • Kun tarkistat CSS-arvon järkevyyden koodikatselmoinnin aikana ilman selaimen kehittäjätyökaluja
  • Kun rakennat saavutettavia sivustoja, jotka tarvitsevat rem-pohjaista kokoa kunnioittaakseen käyttäjän kirjasintoiveita

Vaiheet:

  1. Syötä muunnettava arvo ja valitse sen alkuyksikkö.
  2. Aseta peruskirjasinkoko (oletus on selaimen standardi 16px).
  3. Vw/vh-muunnoksissa syötä haluamasi näkymäalueen leveys ja korkeus.
  4. Lue vastaava arvo kaikissa muissa yksiköissä heti.

Kaava

1rem = 1em = peruskirjasinkoko (oletus 16px) 1pt = 96/72 px ≈ 1.333px 1vw = näkymäalueen leveys / 100 1vh = näkymäalueen korkeus / 100 1% = viitearvo / 100

Käyttötapaukset

  • Suunnittelijan pikselipohjaisen Figma/Sketch-spesifikaation muuntaminen rem-arvoiksi saavutettavaan CSS:ään
  • Vw-pohjaisen responsiivisen kirjasinkoon todellisen renderöitymisen tarkistaminen tietyllä näytön leveydellä
  • Vanhan pt-pohjaisen printti- tai sähköposti-CSS:n muuntaminen verkossa käytettäväksi px- tai rem-yksiköksi
  • Design-järjestelmän väliasteikon puhtaan yhtenevyyden tarkistaminen yksiköiden välillä
  • CSS-arvon nopea järkevyystarkistus koodikatselmoinnin aikana ilman kehittäjätyökalujen avaamista

Keskeiset hyödyt

  • Muuntaa kaikki 7 yleistä CSS-yksikköä yhdessä paikassa
  • Käyttää todellista peruskirjasinkokoasi ja näkymäaluetta, ei kiinteää oletusta
  • Tulokset heti kirjoittaessasi – kehittäjätyökaluja ei tarvitse avata
  • Ilmainen, ei rekisteröitymistä, toimii kokonaan selaimessasi

Ammattilaisen vinkit

  • Suosi rem-yksikköä em:n sijaan kirjasinkooissa välttääksesi odottamattoman kumuloitumisen sisäkkäisissä komponenteissa
  • Käytä dvh/svh-yksikköä vh:n sijaan mobiilin koko näytön asetteluissa, jos kohdeselaimesi tukevat sitä
  • Pidä peruskirjasinkoko yhtenäisenä koko design-järjestelmässä, jotta rem-muunnokset pysyvät ennustettavina
  • Kun käännät pikselintarkkaa suunnitelmaa, muunna välit rem-yksiköiksi mutta pidä reunukset ja muut pienet yksityiskohdat px-yksikössä

Yleisiä vältettäviä virheitä

  • Oletetaan, että 1rem on aina 16px, tarkistamatta, onko juurialkion kirjasinkokoa muutettu
  • Vh-yksikön käyttö mobiilin täysikorkeissa asetteluissa ottamatta huomioon selaimen osoitepalkin käyttäytymistä
  • Em-pohjaisten kirjasinkokojen sisäkkäisyys ja yllättyminen, kun ne kumuloituvat odottamattomasti
  • Px- ja rem-yksiköiden epäjohdonmukainen sekoittaminen samassaa komponentissa rikkoo saavutettavuusskaalauksen

Keskeiset käsitteet selitettynä

Juurialkion kirjasinkoko: html-alkioon asetettu font-size, johon kaikki rem-yksiköt suhteutetaan
Näkymäalue (Viewport): selainikkunassa näkyvä verkkosivun alue
Absoluuttinen yksikkö: yksikkö kuten px tai pt, jolla on kiinteä todellinen koko eikä se ole suhteessa mihinkään kontekstiin
Suhteellinen yksikkö: yksikkö kuten rem, em, vw tai %, jonka koko riippuu toisesta arvosta

Liittyvät käsitteet

  • Värimuunnin: Muunna HEX-, RGB- ja HSL-värimuotojen välillä
  • Pituusmuunnin: Muunna tuumien, senttimetrien, pikselien ja muiden välillä
  • Yksikkömuunnin: Muunna eri mittayksiköiden välillä
  • Kuvasuhdelaskuri: Laske ja muunna kuvasuhteita
  • Datamuunnin: Muunna tavujen, KB:n, MB:n, GB:n ja TB:n välillä

Esimerkki

16px:n peruskirjasinkoolla 1.5rem muuntuu arvoksi 24px. 1440px:n näkymäalueen leveydellä 5vw muuntuu arvoksi 72px.

Tulosten tulkinta

Muunnin ottaa arvon yhdessä CSS-yksikössä ja näyttää vastaavat arvot kaikissa muissa. Keskeinen muuttuja on peruskirjasinkokosi (oletus 16px), joka määrittää rem-px-suhteen. Koska rem on suhteessa juurialkion (html) kirjasinkokoon, tämän perusarvon muuttaminen siirtää kaikki rem-vastineet suhteessa. Syötä responsiivisille yksiköille (vw, vh) haluamasi näkymäalueen mitat nähdäksesi, miten arvot muuntuvat tietyissä näytön koissa. Tämä on erityisen hyödyllistä, kun haluat selvittää, onko 5vw-otsikko luettava 320px:n mobiilinäytöllä (16px) verrattuna 1440px:n työpöytänäyttöön (72px). Muunnin auttaa sinua tekemään tietoisia päätöksiä siitä, mitä yksikköä käyttää kussakin yhteydessä.

Usein kysytyt kysymykset

Mitä eroa on remillä ja em:llä?
rem on aina suhteessa juurialkion (html) kirjasinkokoon, joten se pysyy samana riippumatta siitä, kuinka syvällä alkio on sisäkkäin. em on suhteessa nykyisen alkion omaan kirjasinkokoon, mikä tarkoittaa, että se voi kumuloitua sisäkkäin ollessaan – tämä työkalu käsittelee molempia samalla tavalla yksinkertaisuuden vuoksi käyttäen peruskirjasinkokoasi.
Miksi 1rem on yleensä 16px?
16px on selaimen oletuskirjasinkoko juurialkiolle html käytännössä kaikissa selaimissa. Koska rem on suhteessa tähän juurikokoon, 1rem on 16px, ellei sivu (tai käyttäjän selainasetukset) muuta juurialkion kirjasinkokoa nimenomaisesti.
Mihin vw- ja vh-yksikköjä käytetään?
vw (näkymäalueen leveys) ja vh (näkymäalueen korkeus) ovat prosenttiosuuksia selainikkunan nykyisestä leveydestä ja korkeudesta – 1vw vastaa 1 %:a näkymäalueen leveydestä. Niitä käytetään yleisesti koko näytön kattavissa asetteluissa ja responsiivisessa typografiassa, joka skaalautuu näytön mukaan.
Onko pikseli aina tarkalleen 1/96 tuumaa?
CSS-määritelmän mukaan kyllä – CSS-pikseli määritellään 1/96 tuumaksi, mikä on myös syy siihen, miksi 1pt (1/72 tuumaa) muunnetaan tarkalleen arvoksi 96/72 = 1.333 CSS-pikseliä.
Milloin kirjasinkoossa kannattaa käyttää rem- ja milloin px-yksikköä?
Käytä rem-yksikköä kirjasinkooissa tukemaan saavutettavuutta – se kunnioittaa käyttäjiä, jotka muuttavat selaimensa oletuskirjasinkokoa. Käytä px-yksikköä reunojen leveydet, varjot ja muut pienet yksityiskohdat, joissa haluat kiinteät koot. Useimmat nykyaikaiset design-järjestelmät käyttävät rem-yksikköä väleihin ja typografiaan ja px-yksikköä vain pieniin koriste-elementteihin.
Mitä tapahtuu, jos käyttäjä muuttaa selaimensa kirjasinkokoa?
Jos käytät rem-yksikköjä, koko asettelusi skaalautuu suhteessa käyttäjän kirjasinkokotoiveeseen. Tämä on merkittävä saavutettavuusetu – näkövammaiset käyttäjät voivat suurentaa tekstiä rikkomatta asetteluasi. Jos käytät px-yksikköä, asettelu pysyy kiinteänä, eivätkä käyttäjät voi helposti muuttaa tekstin kokoa.
Miksi 1rem on yleensä 16px?
16px on oletuskirjasinkoko html-juurialkiolle käytännössä kaikissa selaimissa. Koska rem on suhteessa tähän juurikokoon, 1rem on oletuksena 16px. Käyttäjät tai kehittäjät voivat muuttaa tätä peruskokoa, ja juuri siksi rem on hyödyllinen – kaikki rem-arvot skaalautuvat, kun perusta muuttuu.
Mitä ovat dvh, svh ja lvh?
Nämä ovat uudempia näkymäalueen korkeuden yksikköjä: dvh (dynaaminen näkymäalueen korkeus) mukautuu selaimen osoitepalkin näkyessä/piilotessa, svh (pieni näkymäalueen korkeus) käyttää pienintä mahdollista korkeutta ja lvh (suuri näkymäalueen korkeus) suurinta. Ne ratkaisevat klassisen mobiilin vh-ongelman, jossa sisältö piiloutuu osoitepalkin taakse.
Voinko käyttää rem-yksikköä marginaaleihin ja paddingiin?
Kyllä, ja sitä suositellaan yhtenäisten välien vuoksi. Monet design-järjestelmät määrittelevät väliasteikon rem-yksiköissä (esim. 0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 2rem), jolloin kaikki väliarvot ovat 4px:n kerrannaisia 16px:n peruskirjasinkoolla. Tämä luo visuaalisen rytmin ja skaalautuu käyttäjän kirjasintoiveiden mukaan.
Miten muunnan pikselipohjaisen suunnitelman rem-yksiköiksi?
Jaa kukin pikseliarvo peruskirjasinkoollasi (yleensä 16). Esimerkiksi: 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Parittomat luvut pyöristä lähimpään 0.25rem:iin siistien arvojen saamiseksi. 1px:n tai 2px:n välit voivat pysyä px-yksikössä, koska niin pienet arvot eivät tarvitse skaalausta.
Mitä eroa on em- ja rem-yksiköillä?
rem on aina suhteessa juurialkion (html) kirjasinkokoon ja pysyy yhtenäisenä riippumatta sisäkkäisyydestä. em on suhteessa nykyisen alkion kirjasinkokoon, mikä kumuloituu sisäkkäin – 1.5em-otsikko 1.2em-kappaleen sisällä renderöityy arvoksi 1.5 x 1.2 x perusta = 28.8px. Käytä rem-yksikköä ennustettavaan kokoon.

Löydä lisää työkaluja

Tuoreita poimintoja koko työkalukirjastostamme.

Henkilövaurion korvauslaskuri

Safe Withpiirräal Kurssi Lkysyin

Tiheys Lkysyin

EV vs Gas Säästöt Lkysyin

Arvosana Lkysyin

ROAS Lkysyin