§ 13

Skalowanie zasobów Retina/HiDPI

Hvor mange pixels skal mit @2x/@3x-ikon eksporteres i, når CSS-størrelsen er kendt?

Odpowiedź: 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.

Wzór

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.

Symbole i jednostki we wzorze
Symbol	Znaczenie	Jednostka
css_bredde_px	CSS-/punkt-bredde	px
css_hoejde_px	CSS-/punkt-højde	px
skalafaktor	Skalafaktor	—
=	Eksportbredde	px
=	Eksporthøjde	px

Ważność i źródło

Źródło: Apple Human Interface Guidelines – @1x/@2x/@3x-skalafaktorer

Przykład obliczeniowy

Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.

Wstawiono

CSS-/punkt-bredde400 px
CSS-/punkt-højde300 px
Skalafaktor2

Dawca

Eksportbredde800 px
Eksporthøjde600 px

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

Sådan bruger du den

Når du eksporterer ikoner, illustrationer og UI-grafik til en app eller en hjemmeside, skal der være versioner til skærme med høj pixeltæthed. Beregneren ganger designets punktstørrelse med skalafaktoren.

Krok za krokiem

Skriv designets størrelse i punkt eller CSS-pixels.
Vælg skalafaktoren: @1x, @2x eller @3x.
Gang begge mål med faktoren.
Eksportér filen i de mål, og navngiv den med @2x eller @3x.

Typowe błędy

At eksportere i @1x og lade skærmen opskalere.
At bruge PNG til ikoner, der kunne være SVG.

Przykłady z codzienności

Illustration til en app

En illustration i en iPhone-app fylder 400 × 300 punkter, og du eksporterer til @3x.

CSS-/punkt-bredde: 400 px
CSS-/punkt-højde: 300 px
Skalafaktor: @3x (Super Retina)

To znaczy: Filen skal være 1200 px × 900 px.

Ikon til hjemmeside

Et ikon vises i 48 × 48 CSS-pixels og skal være skarpt på Retina-skærme.

CSS-/punkt-bredde: 48 px
CSS-/punkt-højde: 48 px
Skalafaktor: @2x (Retina)

To znaczy: Eksportér ikonet i 96 px × 96 px.

Reguła praktyczna

@2x er dobbelt så mange pixels i hver retning, altså fire gange så mange i alt.

Jak sprawdzić odpowiedź

Eksportbredden ÷ skalafaktoren skal give punktstørrelsen.