Tidak ada satu jawaban yang benar, sebenarnya ada dua:
- Direkomendasikan oleh Google (misalnya dalam kursus Udacity tentang Desain Bahan): Gunakan konversi sederhana, yang dalam banyak kasus adalah 1: 1 seperti di perpustakaan Polymer. Misalnya, itu tidak tepat untuk tampilan retina , jadi daripada 1: 1, gunakan rasio kepadatan yang disediakan di tabel perangkat di Panduan Desain Material resmi ( tabel dengan rasio dan metrik spesifik untuk beberapa perangkat populer ) dan berikan pertanyaan media yang sesuai untuk ambang resolusi dan aset, dengan asumsi bahwa 1dp sama dengan 1px untuk tampilan mdpi (160dpi / ppi) .
Catatan: ide keseluruhan: di bagian bawah halaman: Penskalaan gambar dengan beberapa gambar untuk memvisualisasikan rasio untuk beberapa ambang batas resolusi layar (Gambar breakpoint)
- jika Anda ingin konsistensi ultra di seluruh desain Anda untuk perangkat tertentu , Anda harus membuat lebih banyak penelitian dan perhitungan, dan yang lebih penting setumpuk lebih banyak permintaan @media untuk mendukung sebanyak mungkin perangkat yang Anda inginkan dan menyediakan fallback (dengan metode yang disebutkan di posisi 1) untuk yang tidak terlalu Anda pedulikan.
Berikut adalah informasi yang lebih terperinci bagi mereka yang ingin menyelami topik lebih banyak, tetapi ini adalah penjelasan dan logika di baliknya, jawaban di atas adalah yang lengkap :
Masalahnya adalah "kerapatan piksel", menurut panduan resmi Material Design (Layout> Unit dan pengukuran), adalah:
jumlah piksel yang masuk dalam satu inci.
Jadi pada dasarnya kerapatan piksel adalah nama baru untuk nilai ppi atau karena banyak orang tidak mengenali ini sebagai hal yang terpisah, nilai dpi.
Definisi 1dp sesuai dengan panduan yang sama:
Dp sama dengan satu piksel fisik pada layar dengan kepadatan 160 . Untuk menghitung dp:
dp = (lebar dalam piksel * 160) / kepadatan layar
Saat menulis CSS, gunakan px dimanapun dp atau sp dinyatakan. Dp hanya perlu digunakan dalam pengembangan untuk Android.
Prinsip utama dari desain Material adalah untuk mempertahankan dimensi fisik yang konsisten di berbagai platform yang berbeda, yang mengangkat masalah resolusi desktop, ppi (/ dpi) dan piksel css dalam hal ini Anda harus tetap menghitung dp seperti halnya pada Android perangkat, dan itu tidak benar bahwa sebagian besar layar adalah 96ppi (ini adalah asumsi yang penting untuk CSS), sebagian besar dari mereka memiliki ppi sedikit lebih tinggi, dan jika Anda memperhitungkan tidak hanya desktop tradisional tetapi juga laptop biasa , atau tablet, atau "convertible" seperti Surface, ada kebutuhan untuk konversi: mereka biasanya berkisar 100-130ppi, yang mengatakan yang saya gunakan saat ini adalah 127ppi:
100% = 160ppi -> fisik 1 piksel lebar = 1dp -> persegi panjang 100x100px = 100x100dp
79% = 127ppi -> fisik 1 piksel lebar = ca. 0,8dp -> persegi panjang 100x100px = 80x80dp
Meskipun dp adalah unit murni dan baru hanya untuk Android, Anda harus membuat beberapa perhitungan untuk menyesuaikan tata letak MD yang semuanya datang dalam dp. Jika Anda ingin mengetahui lebih lanjut seberapa besar elemen spesifik dalam arti fisik, yang paling berguna untuk tujuan pertanyaan adalah nilai rentang ukuran sentuh Ideal di dalam pedoman Desain Bahan untuk perangkat tertentu ** Di bawah nilai dp ada yang fisik. ** Nilai dp berubah, tetapi fisiknya tetap sama.
Masalahnya, mengapa Anda perlu menghitung unit, dijelaskan lebih lanjut dalam panduan API Android (Konversi unit dp ke unit piksel) dan masih berlaku untuk elemen yang ditata dengan CSS:
Dalam beberapa kasus, Anda perlu mengekspresikan dimensi dalam dp dan kemudian mengonversinya> menjadi piksel.
Bayangkan aplikasi di mana gulir atau gerakan melempar dikenali setelah jari pengguna bergerak setidaknya 16 piksel. Pada layar dasar, pengguna harus bergerak 16 piksel / 160 dpi, yang sama dengan 1/10 inci (atau 2,5 mm) sebelum gerakan dikenali. Pada perangkat dengan tampilan kepadatan tinggi (240dpi), pengguna harus bergerak sebesar 16 piksel / 240 dpi, yang sama dengan 1/15 inci (atau 1,7 mm). Jaraknya jauh lebih pendek dan dengan demikian aplikasi tampak lebih sensitif kepada pengguna.
Konversi Polimer yang disebutkan sebelumnya 1: 1 mungkin disebabkan oleh fakta bahwa kepadatan 96dpi, atau bahkan yang saya berikan adalah suatu tempat di kepadatan rendah atau bahkan (seperti dalam kasus 96dpi) kelompok, bahkan di bawahnya. Mempertimbangkan bahwa nilai dp bukan css diterima, lebih mudah untuk mengasumsikan bahwa rasio kerapatan (0,75- untuk rendah, 1,0 sedang, dan sebagainya) adalah salah satu yang harus digunakan untuk penyederhanaan dan beberapa ukuran. dukungan layar, yang ditunjukkan pada tabel perangkat untuk Desain Material yang disebutkan sebelumnya. Bahkan disebutkan sebagai salah satu praktik terbaik dalam kutipan di atas bab panduan API Android. Dan di situlah konversi Polymer 1: 1 mungkin baik, karena banyak perangkat memiliki rasio kepadatan di level 1.
Kembali ke dilema terakhir: css px, jika Anda memutuskan untuk menyelami nuansa halus berbagai perangkat. Jika Anda tidak ingin bertanya, tetap gunakan rasio Density dari tabel MD. Tetapi jika Anda seorang perfeksionis, inti dari piksel CSS dan hubungan dimensi fisik ini memiliki penjelasan yang sempurna (dan cukup sederhana) dalam Rekomendasi Kandidat W3C:
The unit panjang mutlak diperbaiki dalam hubungan satu sama lain dan berlabuh ke beberapa pengukuran fisik. Mereka terutama berguna ketika lingkungan output diketahui. Satuan absolut terdiri dari satuan fisik ('in', 'cm', 'mm', 'pt', 'pc', 'q') dan unit sudut visual ('px') :
Untuk membaca selebar lengan, dengan demikian 1px sesuai dengan sekitar 0,26 mm (1/96 inci).
Catatan: Perhatikan bahwa definisi unit piksel dan unit fisik ini berbeda dari versi CSS sebelumnya. Secara khusus, dalam versi CSS sebelumnya unit pixel dan unit fisik tidak terkait dengan rasio tetap: unit fisik selalu terikat dengan pengukuran fisik mereka sedangkan unit pixel akan bervariasi untuk paling cocok dengan pixel referensi. (Perubahan ini dibuat karena terlalu banyak konten yang ada bergantung pada asumsi 96dpi, dan melanggar asumsi yang merusak konten.)
Definisi baru px ini (dengan mempertimbangkan dimensi fisik) mengisi celah antara piksel CSS dan dps dan memungkinkan kami memastikan bahwa dengan menggunakan perhitungan pengukuran sederhana yang disebut lingkungan keluaran, yang dalam hal ini adalah konsisten (dalam arti fisik ) Tata letak MD , tetap sama di berbagai perangkat dan platform. Selain itu, baik Panduan W3C dan MD menggunakan gambar perangkat resolusi rendah dan tinggi untuk menggambarkan ide inti dari cakupan piksel / titik - diperlukan lebih banyak piksel perangkat (titik) untuk mencakup area 1px demi 1px pada perangkat resolusi tinggi daripada pada resolusi rendah, yang berarti bahwa permintaan CSS yang banyak digunakan untuk tampilan retina memang hal yang sama yang harus Anda sediakan (tetapi dengan lebih banyak ambang batas) untuk Desain Material dan semua perangkat seluler.
Kesimpulannya, baik menggunakan rasio MD Density yang merupakan praktik terbaik yang disarankan oleh Google , atau jika Anda terpaku pada ketepatan atau desain Anda harus benar-benar konsisten tentang ukuran fisik: gunakan konversi yang akurat menggunakan nilai ppi / dpi spesifik atau umum perangkat (yang cukup gila), apa yang Anda dapat dengan mudah menguji pada alat online resizer Google karena mereka menghormati ambang batas umum yang disarankan dalam MD Guide di tempat pertama dan aturan pembagian untuk rasio dan nama-nama jenis tampilan yang relevan (xlarge, sedang, dan sebagainya) ) diimplementasikan di dalamnya.
Jadi tetap dengan rasio MD dari tabel mengingat bahwa referensi dp ukuran piksel yang sama adalah untuk resolusi mdpi (160) dan Anda akan baik-baik saja.
em/rem
s di mana-mana dan kemudian hanya skala ukuran font dasar untuk setiap resolusi.