§ 13
Retina/HiDPI-asset-skalering
Hvor mange pixels skal mit @2x/@3x-ikon eksporteres i, når CSS-størrelsen er kendt?
Answer: 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.
Formula
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 | Meaning | Unit |
|---|---|---|
| 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
- Source
- Apple Human Interface Guidelines – @1x/@2x/@3x-skalafaktorer
Worked example
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
Members only
The calculator itself is locked
Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.
Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.