Info Layar

DPR adalah jumlah piksel fisik per piksel CSS. DPR 2 menunjukkan layar Retina, yang berarti gambar harus 2x lebih besar untuk tampilan yang tajam.

Resolusi layar adalah total piksel fisik monitor Anda, sementara viewport adalah area tempat konten ditampilkan di browser, tidak termasuk toolbar dan scrollbar.

Menambatkan breakpoint pada nama perangkat tertentu justru menjamin ia rusak begitu ada perangkat baru. Potonglah di titik tempat tata letaknya sendiri mulai terlihat keliru. Dalam praktiknya 480, 768, 1024, dan 1280 px adalah titik awal yang lazim, tetapi itu angka yang mudah diingat, bukan aturan. Sempitkan jendela peramban perlahan dan amati pada lebar berapa baris teks menjadi terlalu panjang atau kartunya penyok; menaruh breakpoint tepat di sana jauh lebih awet.

Karena piksel CSS adalah satuan ukuran yang tampak, bukan titik fisik. Pada layar 4K dengan penskalaan 200%, 3840 titik fisik disajikan sebagai 1920 piksel CSS, dan itulah yang membuat teks serta ikon terlihat lebih rapat dan tajam. Rasio piksel perangkatnya lalu menjadi 2, sehingga agar gambar tetap tajam Anda perlu menyediakan berkas beresolusi dua kali ukuran tampilnya lewat srcset.