Kueri media adalah fitur CSS yang memungkinkan laman web menyesuaikan tata letaknya dengan berbagai ukuran layar dan jenis media.

Kueri media dapat membuat tampilan responsif dan fleksibel sehingga situs web tetap terlihat bagus di berbagai perangkat.

Contoh penerapan media query adalah menambahkan aturan CSS yang hanya diterapkan jika kondisi tertentu terpenuhi. Misalnya, jika Anda ingin mengubah font layar kecil, Anda bisa membuat aturan CSS seperti ini:

1. @media (max-width: 600px) {
2.                    body {
3.                                   font-size: 16px;
4.                        }
5. }

Contoh di atas pake media query dengan kondisi max-width: 600px. Artinya rule CSS di atas hanya berlaku jika ukuran layar lebih kecil atau sama dengan 600px. Jika kondisi ini terpenuhi ukuran font akan berubah jadi 16 piksel untuk elemen body.

Catatan Kaki

[1] Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes