Bawat yunit ng CSS: absolute, font-relative, viewport-relative, ang mga fluid function, at ang mga yunit ng anggulo, oras, at resolusyon — ano ang pinagsusukatan ng bawat isa at kailan ito dapat gamitin.
Ang mga absolute unit (px, pt) ay nananatili sa nakapirmeng laki anuman ang konteksto; ang mga relative unit (rem, vw, %) ay umaayon sa isang reference na value. Gawing rem ang pinili para sa mga font size: nirerespeto nito ang root font-size setting ng user, kaya sinusunod ng typography mo ang accessibility preference nila. Gumamit ng clamp() para sa fluid typography na lumalaki at lumiliit kasama ng viewport nang hindi lumalampas kailanman sa min o max na hangganan.
Talaan ng sanggunian · 38 mga entry
Mga yunit ng CSSExplained
38 of 38 rows
Absolute
1/96 ng isang pulgada (ang reference pixel ng CSS).
Nakapirmeng pagsukat ng UI: mga border, hairline, sukat ng icon.
border: 1px solid #000;
1/72 ng isang pulgada (1pt = 1.333px).
Mga stylesheet sa pag-print, kung saan nakamap ang mga sukat sa pisikal na papel.
font-size: 12pt;
Isang sentimetro (≈37.8px).
Mga layout sa pag-print na nangangailangan ng totoong sukat.
margin: 2cm;
Isang milimetro (≈3.78px).
Maselang pagsukat sa pag-print.
padding: 5mm;
Isang pulgada (96px = 2.54cm).
Mga layout sa pag-print na sinusukat sa pulgada.
margin: 1in;
Font-relative
Ang sariling font-size ng element (minana sa parent nito).
Pag-eespasyo na kasamang lumalaki ng nakapaligid na text.
padding: 1em;
Ang font-size ng root element (ang html element).
Mga font size: iginagalang nito ang root font-size setting ng user.
font-size: 1.25rem;
Ang advance width ng glyph na '0' sa kasalukuyang font.
Itakda ang nababasang haba ng linya (mga character kada linya).
max-width: 70ch;
Ang x-height ng kasalukuyang font (taas ng maliit na 'x').
Mga bertikal na sukatan na nakakabit sa typeface.
line-height: 2ex;
Ang cap height ng kasalukuyang font (taas ng malaking titik).
Mga bertikal na sukatan na nakabatay sa mga malaking titik, mas masikip kaysa ex.
padding-top: 0.5cap;
Ang advance width ng ideograph na '水' (tubig) sa kasalukuyang font.
Pagsukat na sumusunod sa isang CJK character cell.
width: 4ic;
Ang kinakalkula na line-height ng mismong element.
Sukatin ang mga element sa buong linya ng text.
height: 3lh;
Ang line-height ng root element.
Pag-eespasyo sa mga multiple ng base line height ng dokumento.
margin-block: 2rlh;
Viewport-relative
Ang value ng parent para sa parehong property.
Mga fluid layout na sinusukat sa containing element.
width: 50%;
1% ng lapad ng viewport.
Mga full-bleed na section na sinusukat sa lapad ng screen.
width: 100vw;
1% ng taas ng viewport.
Mga hero section o overlay na sumasaklaw sa taas ng screen.
height: 100vh;
1% ng mas maliit na dimensyon ng viewport.
Sukatin ang mga element para kasya sa screen sa anumang orientation.
font-size: 5vmin;
1% ng mas malaking dimensyon ng viewport.
Punan ang nangingibabaw na axis ng viewport.
font-size: 5vmax;
1% ng maliit na taas ng viewport (buong nakalabas ang UI ng browser).
Mga full-height na section sa mobile na kasya sa itaas ng pinalawig na browser chrome.
height: 100svh;
1% ng malaking taas ng viewport (nakatago ang UI ng browser).
Mga backdrop na dapat takpan ang screen kahit bumagsak ang browser chrome.
height: 100lvh;
1% ng dynamic na taas ng viewport, sumusunod sa UI ng browser habang lumalabas at nawawala ito.
Ang solusyon sa mobile para sa 100vh: nagri-resize ang taas kapag lumabas ang browser chrome.
height: 100dvh;
1% ng maliit na lapad ng viewport.
Katumbas sa lapad ng svh para sa pinakamakitid na estado ng viewport.
width: 100svw;
1% ng malaking lapad ng viewport.
Katumbas sa lapad ng lvh para sa pinakamalapad na estado ng viewport.
width: 100lvw;
1% ng dynamic na lapad ng viewport, sumusunod sa UI ng browser.
Katumbas sa lapad ng dvh kapag nagri-resize ang viewport kasama ng chrome.
width: 100dvw;
1% ng laki ng viewport sa inline axis (lapad sa horizontal na writing mode).
Pagsukat sa viewport na sumusunod sa direksyon ng pagsulat.
width: 50vi;
1% ng laki ng viewport sa block axis (taas sa horizontal na writing mode).
Pagsukat sa viewport na nananatiling tama sa bertikal na writing mode.
height: 50vb;
Fluid
Isang gustong value na hangganan ng min at max.
Fluid typography na hindi kailanman lumalampas sa min o max na hangganan.
width: clamp(320px, 80vw, 1100px);
Ang pinakamaliit sa mga argument nito na hiwalay ng kuwit.
Ikulong ang isang laki para hindi ito kailanman lumampas sa maximum.
width: min(100%, 600px);
Ang pinakamalaki sa mga argument nito na hiwalay ng kuwit.
Ipatupad ang minimum na laki na lumalaki kasama ng viewport.
width: max(50%, 300px);
Anggulo
1/360 ng buong bilog.
Mga rotation transform at posisyon ng anggulo sa gradient.
transform: rotate(45deg);
Radyan; 1rad ≈ 57.2958deg.
Mga anggulo na kinakalkula mula sa matematika, tulad ng mga generated na transform.
transform: rotate(1.5708rad);
Gradyan; 400grad = isang buong bilog.
Mga lumang o survey-style na value ng anggulo.
transform: rotate(100grad);
1turn = isang buong bilog na 360°.
Mga buo o kalahating ikot na madaling mabasa.
transform: rotate(0.5turn);
Oras
Isang segundo.
Mga durasyon ng animation at transition.
transition: opacity 0.3s;
Isang milisegundo (1s = 1000ms).
Mga maikling animation at delay ng feedback sa UI.
animation-duration: 150ms;
Resolusyon
Mga tuldok kada pulgada ng output.
Mga resolution media query na para sa print.
@media (min-resolution: 300dpi)
Mga tuldok kada px unit; katumbas ang 1dppx sa karaniwang 96dpi na display.