Apa dp (kepadatan piksel independen) unit dengan CSS?

90

Untuk Android, orang merekomendasikan menggunakan pengukuran dp (kepadatan piksel independen) untuk elemen UI, dan ada konvensi yang ada seperti penggunaan 48dpuntuk ketinggian tombol, dll.

Saya sedang mengerjakan aplikasi web, dan saya mendapatkan banyak kritik tentang desain UI yang mengatakan bahwa itu tidak sesuai dengan standar desain Android. Jelas sekali, aplikasi saya akan terlihat berbeda karena menggunakan CSS dan HTML, bukan tema Android Holo, tetapi saya tetap ingin membuatnya sesering mungkin. Namun CSS tidak mengizinkan pengukuran independen kepadatan.

Ketika saya menguji aplikasi saya pada resolusi dan kepadatan piksel yang berbeda, itu tidak terlihat bagus, dan kadang-kadang, itu jauh dari proporsi sehingga tidak berfungsi. CSS tidak memiliki unit dp seperti pengembangan asli Android, tetapi saya bertanya-tanya apa beberapa alternatifnya.

Bisakah saya mendapatkan kerapatan piksel menggunakan Javascript dan secara manual menskalakan semuanya dengan benar? Apa cara terbaik untuk membuat aplikasi web yang terlihat dan berfungsi dengan baik pada semua resolusi / kepadatan?

android css web-applications user-interface screen Brad
sumber
2
CSS pxsama dengan dpdi Android. Menurut spesifikasi CSS3. pada unit dan nilai .
omninonsense

Jawaban:

24

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

Unit terdekat yang tersedia di CSS adalah unit persentase viewport.

  • vw - Sama dengan 1% dari lebar blok awal yang berisi.
  • vh - Sama dengan 1% dari tinggi blok awal yang berisi.
  • vmin - Sama dengan yang lebih kecil dari vw atau vh.
  • vmax - Sama dengan yang lebih besar dari vw atau vh.

Satu-satunya browser seluler yang perlu diketahui yang tidak mendukung unit ini adalah Opera. http://caniuse.com/#feat=viewport-units

cimmanon
sumber
Apakah unit-unit itu ditampilkan dengan benar saat diterapkan di iOS?
jmhostalet
@jmhostalet Tidak, ini menyebabkan browser masuk ke semacam loop tak terbatas karena ketinggian viewport dinamis.
rookie1024
6
jawaban ini tidak benar, karena pxunit dalam css (berlawanan secara intuitif) sebenarnya sudah tidak bergantung pada kerapatan piksel - "piksel css adalah bukan piksel", ada banyak artikel tentang ini
ChaseMoskal
178

Saya tidak setuju dengan jawaban yang diterima saat ini. Seperti yang disarankan uber5001, a pxadalah unit tetap, dan dalam semangat yang mirip dengan upaya khusus Android dp.

Per spesifikasi Material :

Saat menulis CSS, gunakan px di mana pun dp atau sp dinyatakan. Dp hanya perlu digunakan dalam pengembangan untuk Android.

Selain itu

Saat mendesain untuk web, ganti dp dengan px (untuk piksel).

Tohuw
sumber
25
Inilah jawabannya. 1 untuk mengutip spesifikasi Material.
Qix - MONICA DISALAHKAN
2
Dari MDN: "Satuan dalam tidak mewakili satu inci fisik di layar, tetapi mewakili 96 piksel. Artinya, berapa pun kerapatan piksel layar sebenarnya, itu dianggap 96dpi. Pada perangkat dengan kerapatan piksel lebih besar, 1 inci akan menjadi lebih kecil dari 1 inci fisik. Demikian pula mm, cm, dan pt bukanlah panjang mutlak. " developer.mozilla.org/en/docs/Web/CSS/…
Maciej Krawczyk
1
Inci CSS dan inci fisik adalah 2 hal yang berbeda. 1 inci CSS selalu 96 piksel, berapa pun kepadatan layarnya. Jadi hanya pada monitor 96 dpi, inci CSS dan inci fisik dapat dianggap sama.
Maciej Krawczyk
1
@MaciejKrawczyk Saya memahami dasar dari pendapat Anda tentang perbedaan skala pada px. Saya bisa berdebat tentang bagaimana sebuah px memang merupakan unit tetap, dan skala yang Anda libatkan tidak mengubah kebenaran dasar ini, tapi itu adalah red herring. Kenyataannya adalah spesifikasi Material secara langsung menyatakan untuk menggunakan px di mana pun dp disarankan. Mengingat Brad bertanya tentang standar desain Android, saya memberikan jawaban kanonis, dan dengan demikian benar.
Tohuw
2
Baru-baru ini update (Mei 2018) ke desain material menjelaskan Pixel Density secara lebih mendalam material.io/design/layout/#pixel-density
Squiggle
17

Gunakan rem.

Ini adalah ukuran font dari elemen root dan unit dasar yang sangat baik untuk ukuran elemen UI lainnya.

Jika seseorang menggunakan ukuran absolut yang sama (dalam sentimeter), teks dan elemen lainnya akan menjadi terlalu besar di seluler atau terlalu kecil di desktop.

Jika seseorang menggunakan jumlah piksel yang sama, teks dan elemen lainnya akan menjadi terlalu kecil di seluler atau terlalu besar di desktop.

The remunit di tempat karena mengatakan "Hei, ini adalah seberapa besar teks normal seharusnya." Mendasarkan ukuran elemen UI lainnya pada ini adalah pilihan yang cukup masuk akal.

Konstantin Schubert
sumber
16

Dalam CSS3, mungkin lebih akurat untuk mengatakan bahwa web tidak memiliki Android px. Spesifikasi CSS3px mengatakan ini:

piksel; 1px sama dengan 1/96 dari 1in

px mungkin ukuran yang Anda inginkan, di masa mendatang.

uber5001
sumber
2
Saya tidak dapat melihat bagaimana transisi ini akan terjadi tanpa merusak segalanya. Dan menggunakan ukuran absolut yang sama (dalam cm) untuk, katakanlah, teks di seluler dan desktop bukanlah paradigma yang baik.
Konstantin Schubert
Dan 1in didefinisikan sebagai 96px. Unit CSS seperti in, mm bergantung pada kepadatan piksel.
Maciej Krawczyk
yo siempre gunakan px en vez de dp y va bien
Ivan Paredes
Pikiran meledak: OOOO
dwjohnston
12

Pada CSS3, tidak ada unit CSS yang benar-benar tidak bergantung pada perangkat. Lihat spesifikasi W3C tentang panjang absolut . Secara khusus, unit absolut mungkin tidak cocok dengan pengukuran fisiknya.

Jika unit fisik sesuai dengan tujuannya, Anda dapat menggunakan sesuatu seperti poin; poin cukup dekat dengan dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Jika Anda menggunakan SCSS, Anda dapat menulis fungsi untuk dikembalikan dalam pts:

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

Dan gunakan itu:

.shadow-2 {
  height: dp(2);
}
Mihai Danila
sumber
10

Bagaimana dengan antarmuka berdasarkan unit rem?

Saya tidak cukup berpengalaman tentang masalah ini untuk mengonfirmasi, tetapi saya pikir Anda dapat membuat beberapa matematika berdasarkan ukuran viewport untuk menerapkan ukuran font di elemen root dan seluruh antarmuka akan menyesuaikannya. Hal ini masih sedikit sihir bagiku.

Darlan Alves
sumber
Anda tidak perlu mengatur ukuran font. Ukuran font default dari elemen root biasanya merupakan pilihan yang cukup masuk akal untuk perangkat yang digunakan.
Konstantin Schubert
1

Mengapa tidak menggunakan poin, ini adalah ukuran yang konsisten di seluruh perangkat. Dan relatif terhadap ukuran layar. Sebagian besar tidak mengenalnya karena berasal dari penerbitan tradisional.

Franklin Mayfield
sumber
0

Bagaimana dengan menggunakan beberapa campuran antara vw (lebar layar untuk perangkat apa pun) dan em? Di sini ukuran font berubah secara dinamis, bergantung pada lebar layar perangkat Anda. Gunakan di file CSS utama Anda aturan berikutnya:

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

(lebar untuk iPhone 6/7/8 adalah 375px, ubah menjadi 320px (iPhone5) dan lain-lain)

Dalam semua kasus itu akan bekerja dengan sempurna. Hanya ada satu minus. Jika sasaran Anda adalah "piksel sempurna", maka Anda perlu menggunakan angka besar setelah titik.

Contoh: sasaran Anda adalah ukuran font h5: 18px di semua layar.

Maka "em" sempurna Anda adalah:

h5 { 
 font-size: 1.79904em;
 }

tanpa kesempurnaan gunakan 18/10:

h5 { 
 font-size: 1.8em;
 }

Menurut Google Chrome Anda mendapatkan 18.0096px;

Yuriy Ivanochko
sumber