CSS-yksiköt selitettynä

Jokainen CSS-yksikkö: absoluuttiset, fonttisuhteelliset, viewport-suhteelliset, fluid-funktiot sekä kulma-, aika- ja resoluutioyksiköt — mihin kukin yksikkö perustuu ja milloin sitä kannattaa käyttää.

Absoluuttiset yksiköt (px, pt) pitävät kiinteän koon riippumatta kontekstista; suhteelliset yksiköt (rem, vw, %) skaalautuvat referenssiarvon mukaan. Suosi rem:ää fonttikokoihin: se kunnioittaa käyttäjän juurifontin kokoa, joten typografiasi noudattaa hänen saavutettavuusvalintaansa. Käytä clamp():aa fluidiin typografiaan, joka kasvaa ja pienenee viewportin mukana ylittämättä koskaan ala- tai ylärajaa.

Viitetaulukko · 38 merkintää

38 of 38 rows


Absoluuttiset
	1/96 tuumaa (CSS-viitepikseli).	Kiinteä UI-koko: reunukset, hiusohuet viivat, kuvakkeiden mitat.	border: 1px solid #000;
	1/72 tuumaa (1pt = 1.333px).	Tulostustyyliarkit, joissa koot vastaavat fyysistä paperia.	font-size: 12pt;
	1 senttimetri (≈37.8px).	Tulosisettelit, jotka tarvitsevat todellisia mittoja.	margin: 2cm;
	1 millimetri (≈3.78px).	Hienojakoiset tulostusmitat.	padding: 5mm;
	1 tuuma (96px = 2.54cm).	Tuumina mitoitettu tulosisittely.	margin: 1in;
Fonttisuhteelliset
	Elementin oma fonttikoko (peritty vanhemmalta).	Välistys, joka skaalautuu ympäröivän tekstin mukana.	padding: 1em;
	Juurielementin fonttikoko (html-elementti).	Fonttikoot: kunnioittaa käyttäjän juurifontin kokoa.	font-size: 1.25rem;
	Nykyisen fontin '0'-merkin leveys.	Aseta luettava rivin pituus (merkkejä rivillä).	max-width: 70ch;
	Nykyisen fontin x-korkeus (pienaakkosen 'x' korkeus).	Typografiaan sidotut pystymitat.	line-height: 2ex;
	Nykyisen fontin versaalikorkeus (isoaakkosen korkeus).	Versaaleihin sovitettuja pystymittoja, tiukempi kuin ex.	padding-top: 0.5cap;
	Nykyisen fontin '水'-ideogrammin (vesi) leveys.	Mitoitus, joka seuraa yhtä CJK-merkkisolua.	width: 4ic;
	Elementin oma laskettu rivikorkeus.	Mitoita elementit kokonaisina tekstiriveinä.	height: 3lh;
	Juurielementin rivikorkeus.	Välistys dokumentin perusrivikorkeuden monina.	margin-block: 2rlh;
Viewport-suhteelliset
	Vanhemman arvo samalle ominaisuudelle.	Fluidit asettelut, mitoitettu sisältävän elementin mukaan.	width: 50%;
	1 % viewportin leveydestä.	Koko ruudun levyiset osiot, mitoitettu näytön leveyden mukaan.	width: 100vw;
	1 % viewportin korkeudesta.	Hero-osiot tai peittokerrokset, jotka kattavat näytön korkeuden.	height: 100vh;
	1 % viewportin pienemmästä mitasta.	Mitoita elementit mahtumaan näytölle kaikissa suunnissa.	font-size: 5vmin;
	1 % viewportin suuremmasta mitasta.	Täytä viewportin hallitseva akseli.	font-size: 5vmax;
	1 % viewportin pienestä korkeudesta (selaimen käyttöliittymä kokonaan näkyvissä).	Mobiilin koko korkeuden osiot, jotka mahtuvat laajennetun selainkäyttöliittymän yläpuolelle.	height: 100svh;
	1 % viewportin suuresta korkeudesta (selaimen käyttöliittymä piilossa).	Taustakerrokset, joiden on peitettävä ruutu, vaikka selaimen käyttöliittymä kutistuu.	height: 100lvh;
	1 % viewportin dynaamisesta korkeudesta, seuraa selaimen käyttöliittymän ilmestymistä ja katoamista.	Mobiilikorjaus 100vh:lle — korkeus muuttuu, kun selaimen käyttöliittymä ilmestyy.	height: 100dvh;
	1 % viewportin pienestä leveydestä.	Leveysvastine svh:lle viewportin kapeimmassa tilassa.	width: 100svw;
	1 % viewportin suuresta leveydestä.	Leveysvastine lvh:lle viewportin leveimmässä tilassa.	width: 100lvw;
	1 % viewportin dynaamisesta leveydestä, seuraa selaimen käyttöliittymää.	Leveysvastine dvh:lle, kun viewportin koko muuttuu käyttöliittymän mukana.	width: 100dvw;
	1 % viewportin koosta inline-akselin suunnassa (leveys vaakaisissa kirjoitussuunnissa).	Viewport-mitoitus, joka noudattaa kirjoitussuuntaa.	width: 50vi;
	1 % viewportin koosta lohkoakselin suunnassa (korkeus vaakaisissa kirjoitussuunnissa).	Viewport-mitoitus, joka pysyy oikeina pystysuorissa kirjoitussuunnissa.	height: 50vb;
Fluidit
	Toivottu arvo, jonka ala- ja yläraja rajaavat.	Fluidi typografia, joka ei ylitä koskaan ala- tai ylärajaa.	width: clamp(320px, 80vw, 1100px);
	Pienin pilkuilla erotetuista argumenteistaan.	Rajoita koko, jotta se ei ylitä koskaan maksimia.	width: min(100%, 600px);
	Suurin pilkuilla erotetuista argumenteistaan.	Vaadi minimikoko, joka kasvaa viewportin mukana.	width: max(50%, 300px);
Kulmat
	1/360 täysympyrästä.	Kierto-transformit ja liukuvälien kulma-asemat.	transform: rotate(45deg);
	Radiaanit; 1rad ≈ 57.2958deg.	Matematiikasta lasketut kulmat, kuten generoidut transformit.	transform: rotate(1.5708rad);
	Graadit; 400grad = täysympyrä.	Perinteiset tai maanmittaustyyliset kulma-arvot.	transform: rotate(100grad);
	1turn = täysi 360°:n ympyrä.	Koko- tai puoli kierrot, jotka luetaan yhdellä silmäyksellä.	transform: rotate(0.5turn);
Aika
	Yksi sekunti.	Animaatioiden ja siirtymien kestot.	transition: opacity 0.3s;
	Yksi millisekunti (1s = 1000ms).	Lyhyet palautteen animaatiot ja viiveet.	animation-duration: 150ms;
Resoluutio
	Tulosteen tuumaa kohden olevia pisteitä.	Tulostukseen kohdennetut resoluution mediakyselyt.	@media (min-resolution: 300dpi)
	Pisteitä px-yksikköä kohden; 1dppx vastaa standardia 96dpi-näyttöä.	Retina- ja korkean pikselitiheyden mediakyselyt.	@media (min-resolution: 2x)
	Pisteitä senttimetriä kohden (1dppx ≈ 2.54dpcm).	Resoluution mediakyselyt metrisillä yksiköillä.	@media (min-resolution: 118dpcm)