CSS-enhetsreferens

Alla verktyg Gratis

Bläddra bland alla CSS-enheter — absoluta (px, cm, pt), typsnittsrelativa (em, rem, ch), viewport (vw, dvh), container-query, rutnät (fr), vinkel, tid och upplösning — i en sökbar, typfiltrerbar referens med en beskrivning, en 'när du ska använda'-anteckning och kopieringsklara token. I din webbläsare, gratis.

Varje CSS-enhet, förklarad. Allt körs i din webbläsare från en inbyggd referens — inget skickas till servern.

Ingen enhet matchar din sökning.
Prova en annan enhet eller kategori — till exempel rem, dvh, fr eller vinkel.

Om CSS-enhetsreferens

CSS Units Reference dokumenterar varje enhet språket erbjuder — 45 sammanlagt — organiserade efter typ: absoluta enheter som px, cm och pt; teckensnittsrelativa enheter som em, rem, ch och lh; viewport-enheter från vw och vh till de nyare svh, lvh och dvh; container-query-enheter som cqw och cqi; grid-enheten fr; plus vinkel, tid, upplösning och procent.

Varje kort ger dig mer än en definition: enhetens beteckning i kopierbar monospace, dess fullständiga namn, dess kategori, en beskrivning på vanligt språk av hur den beräknas, och en praktisk "när ska den användas"-not som säger var enheten gör sig bäst — och var en annan passar bättre.

Sökningen matchar beteckningar, namn och betydelser, så rem, viewport-bredd och rot alla hittar sina enheter, och typmärken filtrerar rutnätet ner till en familj. Allt körs i din webbläsare från en inbyggd referens, utan att något skickas till en server.

Så använder du CSS-enhetsreferens

  1. Sök efter en enhet med beteckning, namn eller betydelse — till exempel rem, viewport-bredd eller vinkel.
  2. Använd typmärkena för att filtrera rutnätet till absoluta, teckensnittsrelativa, viewport-, container-, grid-, vinkel-, tids-, upplösnings- eller procentenheter.
  3. Läs varje enhets beskrivning och dess "när ska den användas"-not för att välja rätt.
  4. Klicka på kopieringsknappen för att hämta enhetens beteckning till ditt stilmallsark.

Vanliga frågor

Använd rem för teckenstorlekar och allt som ska skalas med användarens föredragna textstorlek — rem följer rotens teckenstorlek, så webbläsarens tillgänglighetsinställningar fungerar. Använd px för sådant som måste förbli optiskt konstant, som hårfina kantlinjer.

em är relativ till det aktuella elementets egen teckenstorlek, så nästlade element ackumulerar värdet; rem är alltid relativ till rotelementet, vilket ger förutsägbara resultat. Det är därför rem har blivit standardvalet för avstånd och typskalor.

Mobila webbläsare visar och döljer sina verktygsfält, vilket ändrar den synliga höjden, medan vh förblir fixerad vid den större layoutstorleken. Den dynamiska enheten dvh följer den faktiska synliga höjden när verktygsfälten rör sig, och svh/lvh fixeras vid det minsta respektive största läget.

fr fördelar ett rutnätscontainers lediga utrymme efter andel: grid-template-columns: 2fr 1fr ger den första kolumnen dubbelt så mycket kvarvarande bredd som den andra, efter att fasta spår och mellanrum dragits av. Den existerar bara inom grid-spårdefinitioner.

De storleksanpassar element relativt sin närmaste query-container snarare än viewporten: cqw är 1% av containerns bredd, cqi 1% av dess inline-storlek. De låter en komponent skalas efter boxen den befinner sig i, oberoende av skärmstorlek.

Ja. Alla 45 enheter är dokumenterade gratis på en sida som körs helt i din webbläsare — ingen registrering, inga förfrågningar till servern.
Dela
Relaterade verktyg
HTTP-statuskoder Slå upp varje HTTP-svarsstatuskod (1xx–5xx) i en sökbar, filtrerbar katalog — öppna sedan valfri kod för vad den betyder, när du ska använda den, om den är cachebar och vilken RFC som definierar den. I din webbläsare, gratis. Gratis
HTTP-metoder En överskådlig referens för varje HTTP-begäranmetod — GET, POST, PUT, PATCH, DELETE och resten, plus WebDAV — som med en blick visar om var och en är säker, idempotent och cachebar, om den tar en kropp och ett typiskt exempel. I din webbläsare, gratis. Gratis
HTTP-headers-referens Slå upp vanliga HTTP-begäran- och svarsheaders i en sökbar katalog — filtrera efter riktning och kategori, läs en enradsbeskrivning och ett realistiskt exempel och kopiera valfritt headernamn med ett klick. I din webbläsare, gratis. Gratis
DNS-posttyper Bläddra bland alla vanliga DNS-posttyper — A, AAAA, CNAME, MX, TXT, NS, SOA, PTR, SRV, CAA, DNSKEY, DS, TLSA med flera — med syfte, ett kopierbart zonfilsexempel och en kategori. Sök och filtrera omedelbart, i din webbläsare, gratis. Gratis
TCP/UDP-portnummer Slå upp välkända och vanligt använda nätverksportar i en sökbar tabell — FTP, SSH, HTTP, HTTPS, MySQL, Postgres, RDP, Redis, MongoDB och 120+ till, var och en med sitt transportprotokoll, sin tjänst, beskrivning och kategori. Sök efter portnummer eller tjänstnamn och kopiera värden omedelbart. I din webbläsare, gratis. Gratis
Subnät-/CIDR-kalkylator Beräkna IPv4-subnät från CIDR eller nätmask: nätverk, broadcast, värdområde, wildcard med mera. Gratis
Behöver du hjälp?
Hittade du ett problem med det här verktyget? Berätta för oss.
Rapportera ett problem

Lägg till det här gratisverktyget på din egen webbplats — kopiera och klistra in koden nedan.