Sebelum membahas Cara Menggunakan Data Type resolution pada CSS, yuk simak dulu apa sih Data Type resolution pada CSS?

Tipe data CSS <resolusi> mewakili resolusi perangkat output (layar atau cetak). Resolusi mewakili ukuran “titik” tunggal dalam representasi grafis dengan menunjukkan berapa banyak dari titik-titik ini yang cocok dengan CSS dalam (inci), cm (sentimeter), atau px (piksel). Dari situlah unit dpi (dots per inci), dpcm (dots per sentimeter), dan dppx (dots per pixel) berasal.
Format nilai resolusi adalah <nomor> diikuti oleh unit resolusi case-insensitive: dpi, dpcm, dppx.Tidak ada ruang yang diperbolehkan antara angka dan unit.

Satuan panjang CSS (piksel, inci, dan lainnya) terkait, dan ada rasio tetap 1:96 inci CSS terhadap piksel, yang berarti bahwa, di CSS, satu inci selalu setara dengan 96 piksel, atau, CSS berasumsi bahwa selalu ada 96 (CSS) piksel dalam satu inci (lihat entri <length> untuk detail). Karena itu, 1dppx sama dengan 96dpi (kalikan jumlah titik dalam piksel dengan 96 untuk mendapatkan jumlah titik dalam satu inci).

Singkatnya, sebuah resolusi mewakili kerapatan piksel dalam perangkat keluaran, atau jumlah piksel yang “diperas” menjadi satu inci linier. Semakin tinggi jumlah piksel per inci, semakin tinggi resolusinya, semakin tajam tampilan dan semakin banyak detail yang terlihat.

Nilai resolusi biasanya digunakan dalam CSS untuk membatasi gaya tertentu untuk perangkat output tertentu. Resolusi ditentukan dalam kueri media CSS, yang “meminta” keluaran media untuk kondisi tertentu dan menerapkan gaya khusus dalam lembar gaya ke perangkat keluaran ini jika kondisi yang ditentukan dalam kueri media terpenuhi.

Pilihan untuk value dari Data Type resolution pada CSS:

  • dpi (dots per inch)
  • dpcm (dots per centimeter)
  • dppx (dots per pixel)

Contoh:

Kueri media ini menyatakan bahwa style sheet dapat digunakan pada perangkat dengan resolusi lebih dari 300 pixel per inci:

Kueri media berikutnya menyatakan bahwa style sheet dapat digunakan pada perangkat dengan resolusi lebih besar dari 118 pixel per sentimeter: