Media query adalah fungsi dari css untuk menggunakan css tertentu jika syarat yang ditentukan dipenuhi. Media query merupakan komponen penting untuk membuat web responsive layout.
Contoh menggunakan media query:
<link rel="stylesheet" media="screen and (max-width: 300px)" href="s300.css">
Perintah diatas menunjukan browser agar load file s300.css bila ukuran viewport <= 300px dengan media screen.
Property media yang disupport adalah screen, print, speech dan all. Pada tutorial ini tidak akan dibahas mendalam mengenai media lainnya. Jika ingin lebih dalam, silakan kunjungi website mozila.
Ada beberapa cara menggunakan media query
- Melalu link tag seperti contoh diatas
- Menggunakan @media
- Menggunakan @import
@media screen and (max-width: 300px){/*css goes here*/}
@import "namafilecss.css" only screen and (max-width: 300px);
Cara ke-1, ukuran file css kecil, namun diperlukan beberapa file. Ada risiko terjadi latency saat melakukan request ke server.
Cara ke-2, ukuran css akan lebih besar, namun hanya perlu single request, hingga mengurangi risiko latency.
Cara ke 3 tidak disarankan, karena buruk untuk performance.