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


90

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?


Odpowiedzi:


24

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


Czy te jednostki są poprawnie wyświetlane podczas wdrażania w systemie iOS?
jmhostalet

@jmhostalet Nie, powoduje to, że przeglądarka wchodzi w rodzaj nieskończonej pętli, ponieważ wysokość widoku jest dynamiczna.
rookie1024

6
ta odpowiedź jest nieprawidłowa, ponieważ pxjednostka w css jest (wbrew intuicji) w rzeczywistości już niezależna od gęstości pikseli - "piksel css to nie piksel", jest wiele artykułów na ten temat
ChaseMoskal

178

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).


25
To jest odpowiedź. +1 za podanie specyfikacji materiału.
Qix - MONICA ZOSTAŁA POMYŚLNA

2
Z MDN: „Jednostka w nie reprezentuje fizycznego cala na ekranie, ale reprezentuje 96 pikseli. Oznacza to, że niezależnie od rzeczywistej gęstości pikseli na ekranie przyjmuje się, że wynosi ona 96 dpi. Na urządzeniach o większej gęstości pikseli 1 cal będzie mniejszy niż 1 cal fizyczny. Podobnie mm, cm i pt nie są długością bezwzględną. " developer.mozilla.org/en/docs/Web/CSS/...
Maciej Krawczyk

1
CSS cal i fizyczny cal to dwie różne rzeczy. 1 cal CSS to zawsze 96 pikseli, niezależnie od gęstości ekranu. Tak więc tylko na monitorze 96 dpi cale CSS i cale fizyczne można uznać za równe.
Maciej Krawczyk

1
@MaciejKrawczyk Rozumiem podstawę Twojego twierdzenia o rozbieżności skali na px. Mógłbym spierać się o to, że piksel jest rzeczywiście stałą jednostką, a skala, którą używasz, nie zmienia tej podstawowej prawdy, ale to czerwony śledź. Rzeczywistość jest taka, że ​​specyfikacja materiału bezpośrednio stwierdza, że ​​należy używać px wszędzie tam, gdzie sugerowane jest dp. Biorąc pod uwagę pytanie Brada o standardy projektowania Androida, udzieliłem kanonicznej, a więc poprawnej odpowiedzi.
Tohuw

2
Ostatnia aktualizacja (maj 2018 r.) Do projektowania materiałów wyjaśnia bardziej szczegółowo Pixel Density material.io/design/layout/#pixel-density
Squiggle

17

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.


16

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.


2
Nie widzę, jak to się stanie, nie psując wszystkiego. A używanie tego samego rozmiaru bezwzględnego (w cm) dla, powiedzmy, tekstu na telefonie komórkowym i komputerze nie jest dobrym paradygmatem.
Konstantin Schubert

A 1 cal jest zdefiniowany jako 96 pikseli. Jednostki CSS, takie jak cale, mm, zależą od gęstości pikseli.
Maciej Krawczyk

yo siempre use px en vez de dp y va bien
Ivan Paredes


12

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);
}

10

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.


Nie musisz ustawiać rozmiaru czcionki. Domyślny rozmiar czcionki elementu głównego jest zwykle całkiem rozsądnym wyborem dla danego urządzenia.
Konstantin Schubert

1

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.


0

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;

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.