Bagaimana cara mengkonversi antara Android DP dan CSS px?

Saya melihat ini mungkin pertanyaan noob, tapi itu benar-benar membingungkan saya.

Saya membaca dokumen dari Google Material Design, bersama dengan beberapa implementasinya di css. Spesifikasi ditulis dalam Android dp, sedangkan kode css digunakan pxsebagai satuan panjang.

Yang membingungkan saya adalah bahwa implementasi css sering menggunakan nilai yang tepat dari spesifikasi, misalnya, bersulang harus :

Tinggi snackbar satu baris: tinggi 48 dp

Lebar minimum: 288 dp

Sudut bulat 2 dp

CSS yang sesuai :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

Dalam pemahaman saya saat ini, Android DPumumnya ditampilkan pada ukuran satu piksel pada layar 160dpi, sedangkan CSS pxdidefinisikan sebagai sudut visual. Jadi, apakah pxkebetulan sama dengan dpketika melihat dari jauh? Jika demikian, apakah itu pola umum untuk digunakan pxseperti dpdalam css, atau apakah saya salah mengerti kode CSS?

Saya tidak tahu apa-apa tentang pengembangan Android sebelumnya, dan bukan desainer. Terima kasih atas bantuannya.

Saya pikir yang diterima salah. Css px sebenarnya adalah Device Independent Pixel (dip), dan merupakan pola umum untuk menggunakan px sebagai dp dalam css.

Saya yakin jawaban lengkap untuk pertanyaan Anda dapat ditemukan di sini:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Untuk mengonversi dp ke px Anda harus memperhitungkan dimensi tampilan yang Anda tangani. Semakin besar DPI, semakin banyak piksel yang harus dijejalkan di area yang sama agar terlihat bagus dan untuk menghindari pikselasi :

ldpi: 1 dp = 0,75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1,5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

Misalnya:

3x3 dp square dalam CSS atau Photoshop harus berupa:

2.25x2.25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (resolusi ini akan digunakan pada perangkat generasi berikutnya)

Berdasarkan hal di atas, kalkulator Anda akan terlihat seperti ini, menggunakan pengganda 3x dp untuk layar XXHDPI:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android secara otomatis menurunkan skala gambar jika menemukan bahwa resolusi perangkat yang digunakan lebih rendah, sehingga Anda aman untuk dikembangkan dengan mempertimbangkan XXHDPI, karena hal itu membahas sebagian besar perangkat canggih saat ini di pasar.

Berikut ini adalah konverter sederhana untuk melakukan pekerjaan untuk Anda: http://androidpixels.net/

W3C mengatakan :

Unit px dengan demikian melindungi Anda dari keharusan mengetahui resolusi perangkat. Apakah outputnya 96 dpi, 100 dpi, 220 dpi atau 1800 dpi, panjang yang dinyatakan sebagai jumlah px selalu terlihat bagus dan sangat mirip di semua perangkat (...)

Dan meskipun dikatakan:

Untuk mendapatkan gambaran tentang penampilan px, bayangkan monitor komputer CRT dari tahun 1990-an: titik terkecil yang dapat ditampilkan berukuran sekitar 1/100 inci (0,25mm) atau sedikit lebih. Unit px mendapatkan namanya dari piksel layar tersebut.

Ia juga mengatakan:

Faktanya, CSS mensyaratkan bahwa 1px harus tepat 1/96 inci dari semua hasil cetak (...)

Mempertimbangkan bahwa secara default perangkat layar dikonfigurasikan sebagai 96dpi, itu adalah asumsi terbaik tentang bagaimana browser menginterpretasikan piksel CSS:

96 css-px = ~ 1 inch

Dan kita tahu itu di Android:

160 dp = ~ 1 inch

Begitu:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

Dan menurut itu:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Yah, saya pikir itu benar sampai saya memeriksa ukuran Toast Google Polymer :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

Jadi ini adalah konversi 1 ke 1, dan dari situ kita dapat menggunakan browser Android:

1 css-px = 1 dp

Dan 96 css-px per inci digunakan pada perangkat lain seperti desktop dan laptop.

Untuk menyimpulkan: piksel css tidak tergantung pada perangkat dpi dan pada perangkat Android 1 css-px sama dengan 1dp.

Tidak ada satu jawaban yang benar, sebenarnya ada dua:

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

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