Hvis du har brukt mer enn ti minutter på å style en nettside, har du sannsynligvis støtt på den klassiske CSS-veggen: å prøve å finne ut nøyaktig hvor bred en 50% div egentlig er i piksler.
Noen ganger føles CSS som å følge en oppskrift der målene bare er «litt mel» og «en skvett vann». Du vil ha nøyaktige tall, men CSS gir deg relative proporsjoner.
De gode nyhetene? Å konvertere prosenter til piksler er ikke mørk magi. Det er egentlig bare grunnleggende aritmetikk, og når du først forstår den gylne regelen for CSS-prosenter, slipper du å noen gang gjetter på layoutdimensjonene dine igjen.
La oss bryte det ned steg for steg.
Den gylne regelen: Alt handler om foreldreelementet
Før vi gjør noen beregninger, må vi snakke om hvordan CSS tenker.
Forestill deg at du har en kjempestor, tom bilderamme som henger på veggen. Den rammen er 1000 piksler bred. Hvis du forteller et bilde at det skal ta opp 50% av plassen, tar det opp halvparten av rammen (500 piksler).
I CSS kalles den bilderammen for foreldrebeholderen (parent container). En prosentverdi i CSS eksisterer ikke i et vakuum. Den er alltid, alltid, alltid en prosentandel av sitt direkte foreldreelement.
Hvis du ikke kjenner størrelsen på foreldrebeholderen, kan du ikke beregne pikselverdien til barneelementet. Så enkelt er det!
Den enkle matematikken bak konverteringen
Når du vet pikselbredden (eller -høyden) til foreldrebeholderen din, er matematikken rett frem. Her er formelen:
(Foreldrestørrelse i piksler × Prosent) ÷ 100 = Målpiksler
La oss si at din foreldre-<div> er 800px bred, og du vil at en barne-<div> skal være 75 % bred.
-
800 × 75 = 60 000
-
60 000 ÷ 100 = 600px
Barnebeholderen din vil rendres til nøyaktig 600 piksler i bredden.
Trinn-for-trinn-eksempel: Slik gjør du det i praksis
La oss se på et praktisk scenario. Du bygger en klassisk blogglayout: et hovedinnholdsområde og en sidestolpe (sidebar), placeret ved siden av hverandre i en wrapper.
Her er HTML-koden din:
<div class="wrapper">
<div class="main-content">Dette er artikkelen.</div>
<div class="sidebar">Dette er sidestolpen.</div>
</div>Her er CSS-koden din:
.wrapper {
width: 1200px;
}
.main-content {
width: 70%;
}
.sidebar {
width: 30%;
}Trinn 1: Identifiser foreldreelementet
Foreldreelementet til både .main-content og .sidebar er .wrapper.
Trinn 2: Finn foreldreelementets pikselverdi
Når vi ser på CSS-en vår, er .wrapper hardkodet til 1200px.
Trinn 3: Gjør matematikken
-
Hovedinnhold: (1200 × 70) ÷ 100 = 840px
-
Sidestolpe: (1200 × 30) ÷ 100 = 360px
Hvis du inspiserer disse elementene i nettleserens utviklerverktøy, vil du se at de tilsvarer nøyaktig 840px og 360px.
«Fellene»: Padding, margins og box-sizing
I en perfekt verden er den matematikken alt du trenger. Men CSS har en snikende måte å rote til matematikken vår på: boksmodellen (box model).
Som standard, hvis du sier at en boks skal være 50 % bred og deretter legger til 20px padding, legger CSS disse 20 pikslene på toppen av de 50 prosentene. Plutselig er boksen din bredere enn du beregnet, og hele layouten hopper ned på neste linje.
Løsningen: Bruk alltid box-sizing: border-box;.
* {
box-sizing: border-box;
}Tenk på border-box som å si til nettleseren din: «Når jeg sier 50 %, mener jeg 50 % totalt, inkludert padding og rammer (borders). Løs det.» Dette holder pikselkonverteringene dine nøyaktige og forhindrer at layouten ødelegges.
Merk: Marger (margins) påføres fortsatt på utsiden av boksen, så du må ta hensyn til dem separat!
Din hurtigreferanse (cheat sheet)
Vil du slippe å ta fram kalkulatoren hver gang du skriver CSS? Her er en jukselapp for vanlige prosenter basert på standard bredder for foreldrebeholdere.
| Foreldrebredde | 10% | 25% | 33.33% (Én 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 |
Å konvertere prosenter til piksler handler egentlig bare om å finne frem til foreldrebeholderen din. Når du vet hvor stor «bilderammen» er, blir det som en lek å tilpasse størrelsen på innholdet i den.
Og hvis du noen gang har behov for å gjøre det stikk motsatte – å finne prosenten ut fra en fast pikselverdi – kan du spare deg for hele matematikken og bare bruke en rask Piksler til prosent omformer.