Om du har tillbringat mer än tio minuter med att styla en webbsida har du förmodligen stött på den klassiska CSS-väggen: att försöka lista ut exakt hur bred en 50% div faktiskt är i pixlar.
Ibland känns CSS som att försöka följa ett recept där måtten bara är ”lite mjöl” och ”en skvätt vatten”. Du vill ha exakta siffror, men CSS ger dig relativa proportioner.
De goda nyheterna? Att omvandla procent till pixlar är inte svart magi. Det är faktiskt bara grundläggande aritmetik, och när du väl förstår den gyllene regeln för CSS-procent behöver du aldrig mer gissa dina layoutmått.
Låt oss gå igenom det steg för steg.
Den gyllene regeln: Allt handlar om föräldern
Innan vi gör någon matematik behöver vi prata om hur CSS tänker.
Föreställ dig att du har en gigantisk, tom tavelram som hänger på väggen. Ramen är 1000 pixlar bred. Om du säger åt ett foto att ta upp 50% av utrymmet tar det upp hälften av ramen (500 pixlar).
I CSS kallas den tavelramen för förälderbehållare (parent container). Ett procentvärde i CSS existerar inte i ett vakuum. Det är alltid, alltid, alltid en procentandel av dess direkta förälder.
Om du inte vet storleken på förälderbehållaren kan du inte beräkna barnets pixelvärde. Så enkelt är det!
Den enkla matematiken bakom omvandlingen
När du väl vet pixelbredden (eller höjden) på din förälderbehållare är matematiken enkel. Här är formeln:
(Förälderstorlek i pixlar × Procent) ÷ 100 = Målpixlar
Säg att din förälder-<div> är 800px bred, och du vill att en barn-<div> ska vara 75 % bred.
-
800 × 75 = 60 000
-
60 000 ÷ 100 = 600px
Din barnbehållare kommer att renderas till exakt 600 pixlar i bredd.
Steg-för-steg-exempel: Att använda det i praktiken
Låt oss titta på ett verkligt scenario. Du bygger en klassisk blogglayout: ett huvudinnehållsområde och en sidopanel som ligger sida vid sida i en wrapper.
Här är din HTML:
<div class="wrapper">
<div class="main-content">Det här är artikeln.</div>
<div class="sidebar">Det här är sidopanelen.</div>
</div>Här är din CSS:
.wrapper {
width: 1200px;
}
.main-content {
width: 70%;
}
.sidebar {
width: 30%;
}Steg 1: Identifiera föräldern
Föräldern till både .main-content och .sidebar är .wrapper.
Steg 2: Hitta förälderns pixelvärde
Om vi tittar på vår CSS är .wrapper hårdkodad till 1200px.
Steg 3: Gör matematiken
-
Huvudinnehåll: (1200 × 70) ÷ 100 = 840px
-
Sidopanel: (1200 × 30) ÷ 100 = 360px
Om du inspekterar dessa element i din webbläsares utvecklarverktyg ser du att de blir exakt 840px och 360px.
Fallgroparna: Padding, marginaler och box-sizing
I en perfekt värld är den matematiken allt du behöver. Men CSS har ett lurigt sätt att störa vår matematik: boxmodellen.
Som standard, om du säger åt en ruta att vara 50 % bred och sedan lägger till 20px padding på den, lägger CSS till dessa 20px ovanpå 50 %-enheterna. Plötsligt är din ruta bredare än du beräknade och hela din layout hoppar ner till nästa rad.
Lösningen: Använd alltid box-sizing: border-box;.
* {
box-sizing: border-box;
}Tänk på border-box som att säga till din webbläsare: ”När jag säger 50 % menar jag 50 % totalt, inklusive padding och ramar. Lös det.” Detta håller dina pixelomvandlingar exakta och förhindrar att layouten går sönder.
Obs: Marginaler tillämpas fortfarande utanför rutan, så du måste ta hänsyn till dem separat!
Din lathund för snabbreferens
Vill du inte ta fram miniräknaren varje gång du skriver CSS? Här är en lathund för vanliga procentsatser baserade på standardbredder för förälderbehållare.
| Förälderbredd | 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 |
Att omvandla procent till pixlar är egentligen bara en övning i att spåra upp din förälderbehållare. När du väl vet hur stor ”tavelramen” är blir det en bagatell att storleksbestämma innehållet i den.
Och om du någonsin behöver göra det exakt motsatta – att räkna ut procentandelen från ett hårt pixelvärde – kan du bespara dig matematiken helt och hållet och bara använda en snabb Pixel till Procent-omvandlare.