CSS Academy · Lektion

Absoluta enheter: px, pt och cm

Lär dig när fasta absoluta enheter som pixlar, punkter och centimeter ska användas.

Lektion 1 av 413 steg

Absoluta enheter: px, pt och cm är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Absoluta och relativa enheter

CSS-enheter delas in i två kategorier: absoluta (fasta mått från verkligheten) och relativa (skalade i förhållande till något annat). Absoluta enheter är enhetsoberoende fysiska mått.

px — Pixlar

Pixel (px) är den mest använda absoluta enheten på skärmar. På standardskärmar motsvarar 1px 1 enhetspixel. På skärmar med hög DPI (Retina) motsvarar CSS-pixlar flera enhetspixlar, så att elementen behåller samma visuella storlek.

<button class="button">10px 20px padding</button>

pt — Punkter

En punkt (pt) är en enhet från tryckdesign: 1pt = 1/72 tum. I CSS är 1pt = 4/3px (ungefär 1,33px). Används främst i stilmallar för utskrift och typografi.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — Fysiska enheter

CSS stöder centimeter (cm), millimeter (mm) och tum (in). Dessa är meningsfulla i trycksammanhang men opålitliga på skärmar eftersom skärmarnas DPI varierar.

<div class="page">A4-width page (21cm), used for print layouts</div>

px på skärmar: praktisk användning

För webbd design som visas på skärm är px den enda praktiska absoluta enheten. Även då avråder man från att använda px för teckenstorlekar, eftersom det åsidosätter användarens inställningar för teckenstorlek i webbläsaren.

Enhetens pixelförhållande

Moderna skärmar har ett pixelförhållande för enheten (DPR) > 1. En Retina-skärm med 2x återger 2 enhetspixlar per CSS-pixel. Därför behöver bilder med hög DPI vara 2x eller 3x så stora som visningsstorleken.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

När ska px användas?

Använd px för:

Kantbredder (1px blir skarpt)
Skuggor och transformeringar
Brytpunkter för mediefrågor (även om em-baserade brytpunkter är mer robusta)
Fasta UI-element där exakt pixelkontroll behövs

När px INTE ska användas för typografi

Om du anger font-size: 16px på html eller body åsidosätter det användarens tillgänglighetsinställning i många webbläsare. Använd i stället rem i förhållande till webbläsarens standardvärde.

Q — Kvartsmillimeter

Enheten q motsvarar 1/4 millimeter. Den används i japansk typografi för tryck för fin typografisk kontroll. Den används sällan i allmän webbutveckling.

PC — Pica

En pica (pc) motsvarar 12 punkter eller 1/6 tum. Precis som punkter är pica-enheter tryckenheter som sällan behövs på digitala skärmar.

Absoluta enheter i stilmallar för utskrift

Stilmallar för utskrift är det främsta legitima användningsområdet för absoluta enheter i CSS. Fysiska enheter säkerställer att den utskrivna sidan får korrekta mått på papper.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

Snabb kontroll

Vilken absolut CSS-enhet motsvarar 1/72 tum?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Absoluta enheter är fasta mått som inte påverkas av överordnade element. px är den praktiska enheten för skärmar. Fysiska enheter (pt, cm, in) används i stilmallar för utskrift. Undvik att använda px för typografi – det åsidosätter användarens inställningar för teckenstorlek. Använd i stället rem.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Absoluta enheter: px, pt och cm” gratis?

Ja – hela texten till ”Absoluta enheter: px, pt och cm” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Absoluta enheter: px, pt och cm”?

Lär dig när fasta absoluta enheter som pixlar, punkter och centimeter ska användas. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Absoluta enheter: px, pt och cm”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till CSS Academy