Tipe data <ratio> CSS mewakili rasio. Rasio adalah pernyataan tentang bagaimana dua angka membandingkan. Ini adalah perbandingan ukuran satu angka dengan ukuran angka lainnya. Semua baris di bawah ini adalah cara yang berbeda untuk menyatakan rasio yang sama.

Dalam CSS, hanya yang pertama dari notasi rasio di atas yang valid. Jadi rasio dalam CSS diekspresikan oleh <integer> yang benar-benar positif diikuti dengan garis miring (‘/’, Unicode U + 002F SOLIDUS) dan yang kedua <integer> yang benar-benar positif. Mungkin ada spasi sebelum dan sesudah slash. Misalnya, 2/3 dan 2/3 adalah nilai yang valid.

Rasio digunakan dalam kueri media CSS untuk menjelaskan rasio aspek dari area tampilan yang ditargetkan pada perangkat output. Rasio aspek perangkat adalah rasio piksel horizontal (suku pertama) ke piksel vertikal (suku kedua).
Trivia dan Catatan

Dua rasio aspek yang paling umum di video rumah adalah 4: 3 (atau standar) dan 16: 9 (atau layar lebar). Sebagian besar TV dan monitor komputer yang lebih tua memiliki rasio 4: 3. Rasio 16: 9 adalah rasio aspek asli untuk sebagian besar pemrograman HDTV.

Konten yang cocok untuk layar lebar akan “tergencet” jika dilihat pada layar standar, dan konten layar standar akan direntangkan pada tampilan layar lebar.

Contohnya

Jika perangkat layar dengan piksel persegi memiliki 1280 px horizontal dan 720 piksel vertikal (umumnya disebut “16: 9” atau tampilan layar lebar), Pertanyaan Media berikut semuanya akan cocok dengan perangkat: