Jak przekonwertować między Android DP a CSS px?

Widzę, że jest to prawdopodobnie pytanie noobowe, ale naprawdę mnie dezorientuje.

Czytam dokumenty z Google Material Design, wraz z niektórymi jego implementacjami w css. Specyfikacja jest napisana w Androidzie dp, a kody css są używane pxjako jednostki długości.

To, co mnie dezorientuje, to fakt, że implementacje css często używają dokładnej wartości ze specyfikacji, na przykład toast powinien mieć :

Jednoliniowa wysokość paska przekąskowego: 48 dp wysokości

Minimalna szerokość: 288 dp

2 dp zaokrąglony róg

odpowiedni CSS :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

W moim obecnym rozumieniu system Android DPjest generalnie wyświetlany w rozmiarze jednego piksela na ekranie o rozdzielczości 160 dpi, natomiast CSS pxjest definiowany jako kąt widzenia. Czy pxzdarza się, że dzieje się tak samo, jak dppodczas patrzenia w pewnej odległości? Jeśli tak, to czy jest to powszechny wzorzec do użycia pxjak dpw css, czy też całkowicie źle zrozumiałem kod CSS?

Wcześniej nic nie wiem na temat rozwoju Androida, a nie projektanta. Dziękuję za wszelką pomoc.

Myślę, że przyjęte jest złe. Css px to tak naprawdę piksel niezależny od urządzenia (dip), i często stosuje się px jako dp w css.

Uważam, że pełną odpowiedź na twoje pytanie można znaleźć tutaj:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Aby przekonwertować dp na px, należy wziąć pod uwagę wymiary wyświetlania, do których adresujesz. Im wyższy DPI, tym więcej pikseli będziesz musiał wcisnąć w ten sam obszar, aby wyglądał dobrze i uniknął pikselacji :

ldpi: 1 dp = 0,75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1,5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

Na przykład:

Kwadrat dp 3x3 w CSS lub Photoshopie musi być:

2,25 x 2,25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (ten resolutin będzie używany na urządzeniach nowej generacji)

W oparciu o powyższe obliczenia powinny wyglądać tak, używając mnożnika dp 3x dla ekranów XXHDPI:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android automatycznie skaluje obrazy, jeśli stwierdzi, że rozdzielczość używanego urządzenia jest niższa, więc możesz bezpiecznie tworzyć z myślą o XXHDPI, ponieważ odnosi się do większości dzisiejszych wysokiej klasy urządzeń na rynku.

Oto prosty konwerter, który wykona za Ciebie zadanie: http://androidpixels.net/

W3C mówi :

Jednostka px chroni Cię przed koniecznością poznania rozdzielczości urządzenia. Niezależnie od tego, czy rozdzielczość wynosi 96 dpi, 100 dpi, 220 dpi lub 1800 dpi, długość wyrażona jako liczba pikseli zawsze wygląda dobrze i bardzo podobnie na wszystkich urządzeniach (...)

I choć mówi:

Aby uzyskać wyobrażenie o wyglądzie piksela, wyobraź sobie monitor komputerowy CRT z lat 90. XX wieku: najmniejsza kropka, jaką może wyświetlić, ma wymiary około 1/100 cala (0,25 mm) lub nieco więcej. Jednostka px ma swoją nazwę od pikseli ekranu.

Mówi także:

W rzeczywistości CSS wymaga, aby 1 piksel musiał wynosić dokładnie 1/96 cala na wszystkich wydrukach (...)

Biorąc pod uwagę, że domyślnie urządzenia ekranowe są skonfigurowane jako 96dpi, najlepszym założeniem jest to, jak przeglądarki interpretują piksel CSS:

96 css-px = ~ 1 inch

I wiemy, że w Androidzie:

160 dp = ~ 1 inch

Więc:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

I zgodnie z tym:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Cóż, myślałem, że tak było, dopóki nie sprawdziłem rozmiarów tostów Google Polymer :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

Jest to więc konwersja 1 do 1, z której otrzymaliśmy przeglądarki Androida:

1 css-px = 1 dp

A 96 css-px na cal jest używane na innych urządzeniach, takich jak komputery stacjonarne i laptopy.

Podsumowując: piksele css są niezależne od dpi urządzenia, a na urządzeniach z Androidem 1 css-px jest równy 1dp.

Nie ma jednej właściwej odpowiedzi, w rzeczywistości są dwie:

1. Zalecane przez Google (np. W kursie Udacity na temat projektowania materiałów): Użyj prostej konwersji, która w wielu przypadkach wynosi 1: 1, tak jak w bibliotece Polymer. Nie nadaje się na przykład do wyświetlania siatkówki , więc zamiast 1: 1 użyj współczynnika gęstości podanego w tabeli urządzeń w oficjalnym Przewodniku projektowania materiałów ( tabela ze współczynnikami i specyficznymi danymi dla niektórych popularnych urządzeń ) i podaj odpowiednie zapytania @media dla progi rozdzielczości i zasoby, przy założeniu, że 1dp jest równy 1px dla wyświetlacza mdpi (160dpi / ppi) .

Uwaga: ogólny pomysł: na dole strony: Skalowanie obrazu z pewnym obrazem w celu wizualizacji współczynników dla wielu progów rozdzielczości ekranu (obraz punktu przerwania)

2. jeśli chcesz uzyskać wyjątkową spójność w projekcie dla określonych urządzeń , musisz przeprowadzić więcej badań i obliczeń, a co ważniejsze, stos więcej zapytań @media, aby obsłużyć tyle urządzeń, ile chcesz i zapewnić rezerwę (z metoda wymieniona na 1. miejscu) dla tych, których tak bardzo nie obchodzi.

Oto bardziej szczegółowe informacje dla tych, którzy chcą bardziej zagłębić się w temat, ale jest to wyjaśnienie i logika, powyższe jest kompletną odpowiedzią :

Chodzi o to, że „gęstość pikseli”, zgodnie z oficjalnym przewodnikiem Material Design (Układ> Jednostki i pomiary), to:

liczba pikseli, które zmieszczą się w calach.

Więc w zasadzie gęstość pikseli to nowa nazwa dla wartości ppi lub ponieważ wiele osób nie uznają tego jako osobny rzeczy, wartość dpi.

Definicja 1dp według tego samego przewodnika:

DP jest równy jednemu fizycznemu pikselowi na ekranie o gęstości 160 . Aby obliczyć dp:

dp = (szerokość w pikselach * 160) / gęstość ekranu

Pisząc CSS, używaj px wszędzie tam, gdzie podano dp lub sp. Dp musi być używane tylko przy programowaniu na Androida.

Podstawową zasadą projektowania materiałów jest utrzymanie spójnych wymiarów fizycznych na różnych platformach, co podnosi kwestię rozdzielczości pulpitu, ppi (/ dpi) i piksela css, w którym to przypadku należy trzymać się obliczania dp, tak jak w przypadku Androida urządzenia i nie jest prawdą, że większość ekranów ma 96ppi (to założenie jest ważne dla CSS), duża część z nich ma nieco wyższe ppi, a jeśli weźmie się pod uwagę nie tylko tradycyjny pulpit, ale także zwykłe laptopy lub tablety lub „programy konwertowalne”, takie jak Surface, istnieje potrzeba konwersji: zwykle wynoszą one od 100 do 130 ppi, co oznacza, że ​​obecnie używam 127 ppi:

100% = 160ppi -> szerokość fizyczna 1 piksel = 1dp -> prostokąt 100x100px = 100x100dp

79% = 127ppi -> szerokość fizyczna 1 piksel = ca. 0,8dp -> prostokąt 100x100px = 80x80dp

Chociaż dp jest czystą i nową jednostką tylko dla Androida, należy wykonać pewne obliczenia w celu dostosowania układów MD, które wszystkie są dostępne w dp. Jeśli chcesz mieć więcej wyobrażenia o tym, jak duży będzie konkretny element w sensie fizycznym, najbardziej przydatna do celów pytania jest idealna wartość zakresu wielkości dotyku w wytycznych projektowania materiałów dla określonych urządzeń ** Poniżej wartości dp znajduje się fizyczny. ** Wartość dp zmienia się, ale wartość fizyczna pozostaje taka sama.

Problem, dlaczego należy obliczać jednostki, jest wyjaśniony w przewodniku API Androida (Konwersja jednostek dp na jednostki pikseli) i nadal dotyczy elementów stylizowanych za pomocą CSS:

W niektórych przypadkach konieczne będzie wyrażenie wymiarów w dp, a następnie przekonwertowanie ich> na piksele.

Wyobraź sobie aplikację, w której gest przewijania lub rzutowania jest rozpoznawany po przesunięciu palca użytkownika o co najmniej 16 pikseli. Na ekranie linii bazowej użytkownik musi poruszać się o 16 pikseli / 160 dpi, co odpowiada 1/10 cala (lub 2,5 mm), zanim gest zostanie rozpoznany. Na urządzeniu z wyświetlaczem o wysokiej gęstości (240 dpi) użytkownik musi poruszać się o 16 pikseli / 240 dpi, co odpowiada 1/15 cala (lub 1,7 mm). Odległość jest znacznie mniejsza, a zatem aplikacja wydaje się bardziej wrażliwa na użytkownika.

Wspomniana wcześniej konwersja polimeru 1: 1 prawdopodobnie wynika z faktu, że gęstość 96dpi, a nawet ta, którą podałem, jest gdzieś w niskiej gęstości, a nawet (jak w przypadku 96dpi), nawet poniżej tej grupy. Biorąc pod uwagę, że wartość dp nie jest akceptowana przez css, łatwiej jest założyć, że współczynnik gęstości (0,75 - dla niskiego, 1,0 medium i tak dalej) jest tym, który należy zastosować dla uproszczenia i wielokrotnego rozmiaru obsługa ekranów, która jest pokazana w tabeli urządzeń dla Material Design wspomnianej wcześniej. Jest nawet wymieniany jako jedna z najlepszych praktyk w cytowanym powyżej rozdziale przewodnika API Androida. I właśnie tam konwersja polimerów 1: 1 może być dobra, ponieważ wiele urządzeń ma współczynnik gęstości na poziomie 1.

Wracając do ostatniego dylematu: css px, jeśli zdecydujesz się zanurzyć w subtelne niuanse różnych urządzeń. Jeśli nie jesteś tak dociekliwy, po prostu trzymaj się współczynnika gęstości z tabeli MD. Ale jeśli jesteś perfekcjonistą, to sedno relacji pikseli CSS i wymiarów fizycznych ma idealne (i dość proste wyjaśnienie) w Rekomendacji dla kandydatów W3C:

Jednostki długości bezwzględnej są ustalone względem siebie i zakotwiczone w niektórych pomiarach fizycznych. Są one szczególnie przydatne, gdy znane jest środowisko wyjściowe. Jednostki bezwzględne składają się z jednostek fizycznych („w”, „cm”, „mm”, „pt”, „pc”, „q”) i jednostki kąta widzenia („px”) :

W przypadku odczytu na wyciągnięcie ręki 1 piks odpowiada zatem około 0,26 mm (1/96 cala).

Uwaga: należy pamiętać, że ta definicja jednostki pikseli i jednostek fizycznych różni się od poprzednich wersji CSS. W szczególności, w poprzednich wersjach CSS, jednostka pikseli i jednostki fizyczne nie były powiązane stałym współczynnikiem: jednostki fizyczne były zawsze powiązane z ich pomiarami fizycznymi, podczas gdy jednostka pikseli zmieniała się tak, aby najbardziej pasowała do piksela odniesienia. (Ta zmiana została wprowadzona, ponieważ zbyt wiele istniejących treści opiera się na założeniu 96dpi, a złamanie tego założenia psuje treść).

Ta nowa definicja px (biorąc pod uwagę wymiary fizyczne) wypełnia lukę między pikselami CSS a dps i pozwala nam upewnić się, że dzięki prostym obliczeniom pomiarowym tak zwane środowisko wyjściowe, które w tym przypadku jest spójne (w sensie fizycznym) ) Układ MD pozostaje taki sam na różnych urządzeniach i platformach. Co więcej, zarówno wytyczne W3C, jak i MD wykorzystują zdjęcia urządzeń o niskiej i wysokiej rozdzielczości, aby zilustrować podstawową ideę pokrycia pikseli / kropek - potrzeba więcej pikseli urządzenia (kropek), aby pokryć obszar o wymiarach 1 x 1 x 1 na urządzeniu o wysokiej rozdzielczości niż w niskiej rozdzielczości, co oznacza, że ​​szeroko stosowane w zapytaniach CSS do wyświetlania siatkówki są rzeczywiście tym samym, co musisz podać (ale z większą liczbą progów) dla Material Design i wszystkich urządzeń mobilnych.

Podsumowując, użyj współczynnika gęstości MD, który jest najlepszą zalecaną praktyką Google , lub jeśli jesteś skupiony na precyzji lub twój projekt musi być absolutnie spójny pod względem rozmiarów fizycznych: użyj dokładnej konwersji przy użyciu wartości ppi / dpi dla określonego lub wspólnego urządzenia (co jest dość szalone), co można łatwo przetestować w internetowym narzędziu Google Resizer, ponieważ przestrzegają one wspólnych progów sugerowanych w MD Guide w pierwszej kolejności i reguł podziału dla współczynnika i odpowiednich nazw wyświetlanych typów (xlarge, medium i tak dalej) ) zaimplementowane w nim.

Więc trzymaj się współczynników MD z tabeli, pamiętając, że referencyjny dp równy rozmiar piksela jest dla rozdzielczości mdpi (160) i będziesz dobry.