Hvis du har brugt mere end ti minutter på at style en webside, har du sandsynligvis ramt den klassiske CSS-mur: at prøve at regne ud, nøjagtigt hvor bred en 50% div egentlig er i pixels.
Nogle gange føles CSS som at prøve at følge en opskrift, hvor målene bare er “lidt mel” og “en smule vand.” Du vil have præcise tal, men CSS giver dig relative proportioner.
De gode nyheder? At konvertere procenter til pixels er ikke sort magi. Det er faktisk bare grundlæggende matematik, og når du først forstår den ene gyldne regel for CSS-procenter, behøver du aldrig mere at gætte på dine layoutdimensioner.
Lad os gennemgå det trin for trin.
Den gyldne regel: Det handler alt sammen om forælderen
Før vi laver matematik, skal vi tale om, hvordan CSS tænker.
Forestil dig, at du har en kæmpe, tom billedramme hængende på din væg. Den ramme er 1000 pixels bred. Hvis du beder et foto om at optage 50% af pladsen, optager det halvdelen af rammen (500 pixels).
I CSS kaldes den billedramme for forældrecontaineren (parent container). En procentværdi i CSS eksisterer ikke i et vakuum. Den er altid, altid, altid en procentdel af sit direkte forælderelement.
Hvis du ikke kender størrelsen på forældrecontaineren, kan du ikke beregne pixelværdien af child-elementet. Det er så enkelt!
Den enkle matematik bag konverteringen
Når du kender pixelbredden (eller -højden) på din forældrecontainer, er matematikken ligetil. Her er formlen:
(Forældrestørrelse i pixels × Procent) ÷ 100 = Mål-pixels
Lad os sige, at din forældre-<div> er 800px bred, og du vil have en child-<div> til at være 75% bred.
-
800 × 75 = 60.000
-
60.000 ÷ 100 = 600px
Din child-container vil blive vist som præcis 600 pixels bred.
Trin-for-trin eksempel: Omsat til praksis
Lad os se på et realistisk scenarie. Du er ved at opbygge et klassisk bloglayout: et hovedindholdsområde og en sidebjælke, der ligger side om side i en wrapper.
Her er din HTML:
<div class="wrapper">
<div class="main-content">Dette er artiklen.</div>
<div class="sidebar">Dette er sidebjælken.</div>
</div>Her er din CSS:
.wrapper {
width: 1200px;
}
.main-content {
width: 70%;
}
.sidebar {
width: 30%;
}Trin 1: Identificer forælderelementet
Forælderen til både .main-content og .sidebar er .wrapper.
Trin 2: Find forælderens pixelværdi
Når vi ser på vores CSS, er .wrapper hårdkodet til 1200px.
Trin 3: Lav matematikken
-
Hovedindhold: (1200 × 70) ÷ 100 = 840px
-
Sidebjælke: (1200 × 30) ÷ 100 = 360px
Hvis du undersøger de elementer i din browsers udviklerværktøjer, vil du se, at de er nøjagtigt 840px og 360px.
Faldgruberne: Padding, Margins og Box-Sizing
I en ideel verden er den matematik alt, hvad du behøver. Men CSS har en lumsk måde at drille vores beregninger på: boksmodellen (box model).
Som standard, hvis du beder en boks om at være 50% bred og derefter tilføjer 20px padding til den, lægger CSS disse 20px oveni de 50%. Pludselig er din boks bredere end beregnet, og hele dit layout rykker ned på næste linje.
Løsningen: Brug altid box-sizing: border-box;.
* {
box-sizing: border-box;
}Tænk på border-box som at sige til din browser: “Når jeg siger 50%, mener jeg 50% totalt, inklusiv padding og borders. Find ud af det.” Dette holder dine pixelkonverteringer præcise og forhindrer, at layoutet går i stykker.
Bemærk: Margins påføres stadig uden for boksen, så dem skal du tage højde for separat!
Din hurtige snydeseddel
Har du ikke lyst til at finde lommeregneren frem, hver gang du skriver CSS? Her er en snydeseddel med almindelige procenter baseret på standardbredder for forældrecontainere.
| Forældrebredde | 10% | 25% | 33,33% (En tredjedel) | 50% | 75% |
| 800px | 80px | 200px | ~266px | 400px | 600px |
| 1000px | 100px | 250px | ~333px | 500px | 750px |
| 1200px | 120px | 300px | 400px | 600px | 900px |
| 1440px | 144px | 360px | 480px | 720px | 1080px |
At konvertere procenter til pixels handler i virkeligheden bare om at finde din forældrecontainer. Når du først ved, hvor stor “billedrammen” er, bliver tilpasningen af indholdet i den en smal sag.
Og hvis du nogensinde får brug for at gøre det stik modsatte — at finde procentdelen ud fra en fast pixelværdi — kan du helt spare matematikken og blot bruge en hurtig Pixel til procent-konverter.