Dito PriwantoSetelah belajar mengatur ukuran element, pada series belajar CSS kali ini, kami akan membahas tentang media query beserta contohnya. Simak informasi berikut ini.
Media query dalam CSS berfungsi untuk membuat tampilan frontend website menjadi responsif sehingga dapat diakses dengan baik di berbagai perangkat, seperti mobile, tablet, laptop, dan PC.
Apa itu Media Query?
Media query adalah fitur penting dalam CSS yang memungkinkan tampilan website menjadi responsif di berbagai perangkat. Dengan media query, Anda dapat menyesuaikan tampilan website sesuai dengan karakteristik perangkat pengguna, seperti ukuran dan resolusi layar, sehingga website dapat diakses dengan optimal pada mobile, tablet, dan laptop/PC.
Sebelum mempelajari lebih lanjut tentang CSS media query, pastikan Anda sudah memahami konsep dasar CSS dan memiliki pemahaman dasar tentang tata letak web menggunakan HTML.
Anda dapat balajar HTML dan CSS dasar untuk pemula pada series artikel berikut:
Untuk memulai belajar CSS tentang media query, Anda perlu memahami beberapa sintaks penting yang nantinya akan sering Anda gunakan.
Sintaks CSS Media Query
Penulisan CSS media query hampir sama seperti penulisan CSS pada umumnya. Penulisan pada script CSS cukup menggunakan @media dilengkapi dengan aturan yang akan diterapkan. Berikut contoh kodenya :
@media media-type and (media-feature-rule) {
/* Script kode css */
}Dari script tersebut terdiri dari:
- media-type : akan memberitahu browser media apa yang akan ditentukan.
- media-feature-rule : ekspresi media atau aturan yang perlu diterapkan.
- CSS rules : kode CSS jika aturan media type dan media feature memiliki nilai benar.
Format Penulisan CSS Media Query
Sama halnya seperti membuat script CSS pada umumnya, Anda dapat menyisipkan kode CSS media query pada file CSS atau pada script CSS yang akan digunakan.
Dari contoh kode diatas, terdiri dari media-type, media-feature-rule, dan CSS rules. Mari kita bahas satu persatu.
Media Type
Media type untuk menentukan aturan untuk perangkat berbeda. Berikut beberapa jenis media yang umum digunakan:
| Jenis Media | Keterangan |
| all | Cocok untuk semua perangkat media. |
| Digunakan untuk printer. | |
| screen | Ditargetkan pada layar komputer, tablet, ponsel pintar, dll. |
Media Feature
Setelah menentukan media type, Anda perlu menentukan aturan yang akan diterapkan. Berikut salah satu aturan yang umum digunakan.
Width dan height: aturan ini akan mendeteksi lebar dan tinggi ukuran layar yang tetap. Selain itu, Anda juga dapat menggunakan max-width dan min-width atau max-height dan min height untuk menentukan ukuran layar sesuai dengan ukuran layar. Berikut contoh kodenya :
@media screen and (max-width: 600px) {
body {
color: blue;
}
}Orientasi: aturan ini akan dapat mendeteksi orientasi ukuran layar apakah dalam bentuk potrait atau landscape. Berikut contoh kodenya :
@media (orientation: landscape) {
body {
color: blue;
}
}Ranged: aturan ini dapat menentukan kondisi diantara 2 nilai. Berikut contoh kodenya:
@media (min-width: 30em) and (max-width: 50em) {
body {
color: blue;
}
}Deklarasi CSS rules
Setelah diterapkan, Anda dapat menentukan kode CSS sesuai dengan media dan aturan yang akan diterapkan. Penulisan aturan kode sama seperti penulisan kode CSS pada umumnya. Berikut contoh scriptnya:
@media screen and (max-width: 600px) {
/*ini adalah awal css rules*/
body {
color: blue;
}
/*ini adalah akhir css rules*/
}Contoh Script CSS Media Query
Setelah memahami format penulisan CSS media query di atas, berikut akan Kami berikut kami berikan contoh script atau query secara full peda website:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: blue;
}
@media only screen and (max-width: 600px) {
body {
background-color: red;
}
}
</style>
</head>
<body>
<p>Perkecil ukuran layar hingga lebar kurang dari 600px, maka warna background akan berganti dari biru menjadi merah</p>
</body>
</html>Pada contoh script diatas, ketika di akses melalui browser dengan lebar layar lebih dari 600px, maka background akan berwarna biru.
Sedangkan jika diakses menggunakan layar kurang dari 600px maka background akan berubah menjadi merah.
Kesimpulan
Dengan menggunakan CSS media query, Anda dapat membuat website yang responsif terhadap berbagai ukuran layer. Interface website dapat disesuaikan untuk setiap perangkat, sehingga tampilannya berbeda berdasarkan jenis layar atau perangkat yang digunakan.
Hal ini bertujuan untuk memudahkan pengunjung website Anda, serta memastikan bahwa halaman web yang Anda bangun tetap terlihat bagus, menarik, responsif, dan berfungsi dengan baik di semua perangkat.
Demikian series belajar CSS bagian 9 tentang media query. Simak terus series belajar CSS selanjutnya di Rumahweb, agar kemampuan CSS Anda semakin bertambah. Semoga bermanfaat.
