Relacja między dp - sp i PX

Question

Nie pytam, jaka jest różnica między dp, sp i px.

Projektuję stronę internetową opartą na nowym materiałowym projekcie Google, wszystkie pomiary są w dp (dla siatki) i sp (dla tekstu). Moje pytanie brzmi: jak tłumaczą się na piksele. Projektuję strony internetowe od ponad 4 lat, a wszystkie pomiary (siatki i czcionki) są w pikselach.

Dla przykładu:

1. Nagłówek jest 24sp, ile pikseli to przełoży się? (to nie 24px, próbowałem je dopasować, ma około 28 pikseli, ale muszą być standardowe systemy pomiarowe).
2. Wytyczne dotyczące siatki: "Wszystkie komponenty są wyrównane do siatki podstawowej o kwadratowej 8 dp." - ile pikseli to równa?

1px =? Dp =? Sp na komputerze stacjonarnym lub dowolnym średnim monitorze lub urządzeniu mobilnym?

Answer 1

Radzę przeczytać definicje Google DP i SP, które można znaleźć w Android Dokumentach here i here.

Istnieje również kilka przydatnych informacji w cudownej Designer's Guide to DPI.

Answer 2

Myślę, że odpowiedź będzie:

1px = 1DP = 1SP na dowolnym monitorze średniej lub urządzeniu przenośnym.

Jak to wymyśliłem?

Ponieważ piksel to piksel, dla andriod dp i sp są używane, ponieważ są używane w aplikacjach natywnych, które muszą być skalowane, a rozdzielczość każdego ekranu różni się w zależności od urządzenia. W przypadku komputerów stacjonarnych wszystko to jest takie samo, poza tym strona musi być zgodna/responsywna dla urządzeń mobilnych, ale ponieważ strona ładuje się w przeglądarce, niektóre dodatkowe media (oparte na wytycznych) wykonają zadanie.

Jeśli ktoś ma jakiś inny logiczny wniosek, proszę podzielić

Answer 3

Bezpieczną zasadą jest użycie 1 piksela = 1 dp.

Powinno to zapewnić dobry bezpieczny rozmiar prawie na każdym urządzeniu. Na niektórych urządzeniach będzie wyglądać nieco spory, zwłaszcza iPad (zwykły).

Oto dlaczego:

"DP odpowiada fizycznej wielkości piksela przy 160 dpi" (https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD)

160 dpi oznacza:

160 punktów = 1 cal

Dlatego:

160 dp = 1 cal (25,4 mm)

Kiedy Google zaleca, aby przyciski miały dotykową wysokość docelową 48 dp, twierdzą, że muszą mieć wysokość 0,3 cala (7,6 mm).

A więc ile jest tego px? Cóż, to zależy od urządzenia.

Przykłady 48 dp (7,6 mm) wysokości przycisku:

• IPAD mini: 48 px Dlaczego mini ekran IPAD ma szerokość około 120 mm, wykorzystuje 768 px wypełnić tę przestrzeń . Dlatego potrzebujesz 162 px, aby zajmować cala (25,4 mm), lub 48 px dla wysokości przycisku 7,6 mm.

• Kindle przeciwpożarowa (7 "): 43 px

• Kindle przeciwpożarowa (6") 50 px

• iPhone: 48 px

• Nexus 7: 48 px

• Regularne iPad: 39 px

(może mam fudged zaokrąglania w górę/w dół odrobinę .. Lubię 48 lepiej niż 49!)

Ekran mm i szerokość CSS px przykłady: I oblicza szerokość ekranu przy użyciu wymiarów ekranu CSS px i długość po przekątnej.

• iPad mini: rozdzielczość 1024 x 768 i przekątna 201 mm = szerokość 120 mm.
• Kindle Fire 7 ": rozdzielczość 858 x 533 i przekątna 178 mm = szerokość 94 mm
• Kindle Fire 6": rozdzielczość 853 x 533 i przekątna 152 mm = szerokość 81 mm.
• iPhone: Rozdzielczość 568 x 320 i przekątna 102 mm = szerokość 50 mm.
• Nexus 7: 960 * 600 i przekątna 178 mm = szerokość 94 mm.
• iPad regularny: rozdzielczość 1024 x 768 i przekątna 246 mm = szerokość 148 mm.

Uwaga: do obliczenia wysokości px przycisku należy użyć wymiarów CSS urządzenia. Liczby te niekoniecznie są takie same, jak podane w specyfikacjach.