Jakie są jednostki dp (piksele niezależne od gęstości) w CSS?

W przypadku Androida ludzie zalecają stosowanie pomiarów dp (pikseli niezależnych od gęstości) dla elementów interfejsu użytkownika i istnieją konwencje, takie jak używanie 48dpwysokości przycisku itp.

Pracuję nad aplikacją internetową i otrzymuję wiele krytyki na temat projektu interfejsu użytkownika, mówiąc, że nie jest on zgodny ze standardami projektowania Androida. Oczywiście moja aplikacja będzie wyglądać inaczej, ponieważ używa CSS i HTML zamiast motywu Android Holo, ale nadal chciałbym, aby była jak najbardziej zgodna. Jednak CSS nie pozwala na pomiary niezależne od gęstości.

Kiedy testuję moją aplikację na różnych rozdzielczościach i gęstościach pikseli, nie wygląda dobrze, a czasami jest zdecydowanie nieproporcjonalna, więc nie jest nawet funkcjonalna. CSS nie ma jednostek dp, jak ma to miejsce w przypadku natywnych programów dla Androida, ale zastanawiałem się, jakie są alternatywy.

Czy mogę w jakiś sposób uzyskać gęstość pikseli za pomocą JavaScript i ręcznie skalować wszystko odpowiednio? Jaki jest najlepszy sposób na stworzenie aplikacji internetowej, która ładnie wygląda i działa na wszystkich rozdzielczościach / gęstościach?

http://www.w3.org/TR/css3-values/#lengths

Najbliższą jednostką dostępną w CSS są jednostki procentu widocznego obszaru.

• vw - równa 1% szerokości początkowego zawierającego bloku.
• vh - równa 1% wysokości początkowego bloku zawierającego.
• vmin - równe mniejszemu z vw lub vh.
• vmax - równe większej z wartości vw lub vh.

Jedyną przeglądarką mobilną, o której należy wiedzieć, nie obsługuje tych jednostek, jest Opera. http://caniuse.com/#feat=viewport-units

Nie zgadzam się z aktualnie zaakceptowaną odpowiedzią. Jak sugeruje uber5001, a pxjest jednostką stałą i podobną do starań Androida-specifc dp.

Według specyfikacji materiału :

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

dodatkowo

Projektując na potrzeby internetu, zamień dp na px (dla piksela).

Użyj rem.

Jest to rozmiar czcionki elementu głównego i bardzo dobra jednostka bazowa dla rozmiaru innych elementów interfejsu użytkownika.

Gdyby użyć tego samego rozmiaru bezwzględnego (w centymetrach), tekst i inne elementy byłyby o wiele za duże na urządzeniach mobilnych lub za małe na komputerach.

Gdyby ktoś użył tej samej liczby pikseli, tekst i inne elementy byłyby o wiele za małe na urządzeniach mobilnych lub za duże na komputerach.

remJednostka jest na miejscu, bo mówi: „Hej, to jak duży powinien być normalny tekst.” Oparcie na tym rozmiaru innych elementów interfejsu użytkownika jest całkiem rozsądnym wyborem.

W CSS3 bardziej trafne może być stwierdzenie, że w sieci nie ma Androida px. Specyfikacja CSS3px mówi tak:

piksele; 1px to 1/96 z 1 cala

px może być pożądanym pomiarem w przyszłości.

Od wersji CSS3 nie ma jednostek CSS, które byłyby naprawdę niezależne od urządzenia. Zobacz specyfikację W3C dotyczącą długości bezwzględnych . W szczególności jednostki bezwzględne mogą nie odpowiadać ich pomiarom fizycznym.

Gdyby jednostki fizyczne były wierne swojemu przeznaczeniu, można by użyć czegoś takiego jak punkty; punkty są wystarczająco blisko dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Jeśli używasz SCSS, możesz napisać funkcję do zwrócenia w pkt:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

I użyj go:

.shadow-2 {
  height: dp(2);
}

A co z interfejsem opartym na jednostkach rem?

Nie mam wystarczającego doświadczenia w tej sprawie, aby to potwierdzić, ale myślę, że możesz zrobić trochę matematyki na podstawie rozmiaru widocznego obszaru, aby zastosować rozmiar czcionki w elemencie głównym, a cały interfejs dostosowałby się odpowiednio. Te rzeczy są dla mnie jeszcze trochę magiczne.

Dlaczego nie użyć punktów, jest to jednolity rozmiar na wszystkich urządzeniach. I jest zależny od rozmiaru ekranu. Większość z nich nie zna go, ponieważ pochodzi z tradycyjnego wydawnictwa.

A co powiesz na użycie kombinacji vw (szerokość ekranu dla dowolnego urządzenia) i em? Tutaj rozmiar czcionki zmienia się dynamicznie, w zależności od szerokości ekranu urządzenia. Użyj w swoim głównym pliku CSS następnej reguły:

font-size: calc(100vw * 10 / 375);

(szerokość dla iPhone'a 6/7/8 to 375px, zmień ją na 320px (iPhone5) itd.)

We wszystkich przypadkach działa idealnie. Jest tylko jeden minus. Jeśli Twoim celem jest „doskonały piksel”, musisz użyć dużych liczb po kropce.

Przykład: Twoim celem jest rozmiar czcionki h5: 18 pikseli na wszystkich ekranach.

Wtedy twoim idealnym „em” będzie:

h5 { 
 font-size: 1.79904em;
 }

bez perfekcji użyj 18/10:

h5 { 
 font-size: 1.8em;
 }

Według Google Chrome otrzymujesz 18.0096px;