Jawaban singkat
Rasio piksel perangkat adalah rasio antara piksel fisik dan piksel logis. Misalnya, iPhone 4 dan iPhone 4S melaporkan rasio piksel perangkat 2, karena resolusi linear fisik dua kali lipat resolusi linear logis.
- Resolusi fisik: 960 x 640
- Resolusi logis: 480 x 320
Rumusnya adalah:
Dimana:
adalah resolusi linear fisik
dan:
adalah resolusi linear logis
Perangkat lain melaporkan rasio piksel perangkat yang berbeda, termasuk yang non-integer. Misalnya, Nokia Lumia 1020 melaporkan 1,6667, Samsumg Galaxy S4 melaporkan 3, dan Apple iPhone 6 Plus melaporkan 2,46 (sumber: dpilove ) . Tapi ini pada dasarnya tidak mengubah apa pun, karena Anda tidak boleh mendesain untuk satu perangkat tertentu.
Diskusi
CSS "pixel" bahkan tidak didefinisikan sebagai "salah satu elemen gambar pada beberapa layar", melainkan sebagai pengukuran sudut non-linear dari sudut pandang, yang kira-kira satu inci di lengan panjang. Sumber: Panjang Absolut CSS
Ini memiliki banyak implikasi ketika datang ke desain web, seperti menyiapkan sumber daya gambar definisi tinggi dan hati-hati menerapkan gambar yang berbeda pada rasio piksel perangkat yang berbeda. Anda tidak ingin memaksa perangkat kelas bawah untuk mengunduh gambar beresolusi sangat tinggi, hanya untuk menurunkannya secara lokal. Anda juga tidak ingin perangkat kelas atas untuk meningkatkan gambar beresolusi rendah untuk pengalaman pengguna yang buram.
Jika Anda terjebak dengan gambar bitmap, untuk mengakomodasi banyak rasio piksel perangkat yang berbeda, Anda harus menggunakan CSS Media Queries untuk menyediakan rangkaian sumber daya yang berbeda untuk berbagai kelompok perangkat. Gabungkan ini dengan trik yang bagus seperti background-size: cover
atau secara eksplisit mengatur nilai background-size
persentase ke.
Contoh
#element { background-image: url('lores.png'); }
@media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires.png'); }
}
@media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('superhires.png'); }
}
Dengan cara ini, setiap jenis perangkat hanya memuat sumber daya gambar yang benar. Perlu diingat juga bahwa px
unit dalam CSS selalu beroperasi pada piksel logis .
Wadah untuk grafik vektor
Semakin banyak jenis perangkat yang muncul, semakin sulit untuk menyediakan semuanya dengan sumber daya bitmap yang memadai. Di CSS, permintaan media saat ini adalah satu-satunya cara, dan di HTML5, elemen gambar memungkinkan Anda menggunakan sumber yang berbeda untuk permintaan media yang berbeda, tetapi dukungannya masih belum 100% karena sebagian besar pengembang web masih harus mendukung IE11 untuk sementara waktu ( sumber: caniuse ) .
Jika Anda membutuhkan gambar yang tajam untuk ikon, garis-seni, elemen desain yang bukan foto , Anda harus mulai memikirkan SVG, yang diskalakan dengan indah ke semua resolusi.
width=device-width
saya akan membuatnya membentang ke layar penuh?