CSS-yksikköjen muuntaminen tarkoittaa erilaisten pituusyksiköiden (px, em, rem, %, vw, vh jne.) muuntamista toisikseen, joita käytetään verkkosuunnittelussa.
Absoluuttiset ja suhteelliset yksiköt
CSS-yksiköt jaetaan laajasti absoluuttisiin ja suhteellisiin. Absoluuttiset (px, pt, cm jne.) ovat kiinteitä, kun taas suhteelliset (em, rem, %, vw, vh jne.) ilmaistaan suhteena perusarvoon.
px (Pikseli)
Yleisin yksikkö, joka vastaa yhtä pistettä näytöllä. Helppo käsitellä kiinteän koon vuoksi, mutta voi aiheuttaa saavutettavuushaasteita, koska se sivuuttaa käyttäjän fonttiasetukset.
em (Em)
Suhteellinen yksikkö, joka perustuu vanhemman elementin fonttikokoon. 1em = vanhemman font-size. Syvissä rakenteissa laskenta voi kumuloitua ja johtaa odottamattomiin kokoihin.
rem (Root Em)
Suhteellinen yksikkö, joka perustuu root-elementin (html) fonttikokoon. 1rem = html:n font-size (yleensä 16px). Toisin kuin em, rem ei riipu pesästymisestä ja on suositeltava nykyaikaisessa CSS:ssä.
% (Prosentti)
Ilmaisee suhteen vanhempaelementin kokoon. Font-size:ssa se perustuu vanhemman fonttikokoon; leveydessä vanhemman leveyteen. Perusta vaihtelee ominaisuuden mukaan.
vw/vh (Viewport-yksiköt)
Näihin yksiköihin vaikuttaa viewportin koko. 1vw = 1 % viewportin leveydestä, 1vh = 1 % viewportin korkeudesta. Mahdollistavat joustavat layoutit, jotka reagoivat näytön kokoon.
pt/pc (Painoyksiköt)
Painoalalla käytetyt yksiköt. 1pt = 1/72 tuumaa, 1pc = 12pt. Käytetään print-CSS:ssä ja PDF-generoinnissa, mutta näytöllä yleisemmin käytetään px tai rem.
Fyysiset yksiköt (cm/mm/in)
Yksiköt, jotka kuvaavat todellista fyysistä pituutta. 1in = 2.54cm = 25.4mm = 96px (CSS-määritelmä). Käytetään, kun tarvitaan yhdenmukaisuutta painomateriaalien kanssa, mutta näytön fyysistä kokoa ei voi taata.
Reaaliaikaisen muunnoksen edut
Tämä työkalu tukee reaaliaikaista muunnosta ja päivittää tulokset heti, kun perusarvot muuttuvat. Mahdollistaa nopean tarkistuksen eri näyttökokojen ja fonttiasetusten vaikutuksista.