§ 13
Retina/HiDPI-asset-skalering
Hvor mange pixels skal mit @2x/@3x-ikon eksporteres i, når CSS-størrelsen er kendt?
Svar: Beregneren omregner en billedressourcens punkt-/CSS-størrelse til den faktiske pixelstørrelse, den skal eksporteres i for at se skarp ud på skærme med højere pixel-tæthed (Retina/HiDPI). Bruges når man eksporterer ikoner, illustrationer og UI-grafik til app- eller webdesign i flere opløsninger. Erstatter ikke en fuld asset-eksportplan, men giver de tre standardstørrelser.
Formel
Eksport-pixelstørrelse = CSS-/punkt-størrelse × skalafaktor.
Apples Human Interface Guidelines definerer @1x som 1:1 pixel-tæthed, @2x som dobbelt og @3x som tredobbelt tæthed — samme princip bruges i Android (mdpi/xhdpi/xxhdpi) og på responsive websites.
| Symbol | Betydning | Enhed |
|---|---|---|
| css_bredde_px | CSS-/punkt-bredde | px |
| css_hoejde_px | CSS-/punkt-højde | px |
| skalafaktor | Skalafaktor | — |
| = | Eksportbredde | px |
| = | Eksporthøjde | px |
Gyldighed og kilde
- Kilde
- Apple Human Interface Guidelines – @1x/@2x/@3x-skalafaktorer
Regneeksempel
Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.
Sat ind
- CSS-/punkt-bredde400 px
- CSS-/punkt-højde300 px
- Skalafaktor2
Giver
- Eksportbredde800 px
- Eksporthøjde600 px
Kun for medlemmer
Selve beregneren er låst
Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.
Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.