Apa dp (kepadatan piksel independen) unit dengan CSS?

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?

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

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

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.

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.

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

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.

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.

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;