Halo, apa kabar teman-teman. Jumpa lagi dengan kami dalam HTML & CSS Nusantech Academy. Pada pembahasan sebelumnya kita berhasil mengenal apa itu Grid, kini kita akan lanjut membahas Media Query. Semangat
Apa itu Media Query
Media query merupakan modul CSS3 yang berguna membuat layout kita responsive dengan menyesuaikan tampilan berdasarkan ukuran layar perangkat.
Terkadang tampilan yang sudah kita desain dengan sedemikian rupa bisa kacau jika ditampilkan pada tampilan mobile. Dengan media query kita dapat menyelesaikan masalah ini dengan menentukan aturan ukuran dan tata letak elemen dengan kondisi-kondisi tertentu
Media query juga disebut dengan Breakpoint, karena cara kerja media query yakni dengan cara mengecheck ukuran viewport(layar/area dimana konten terlihat) apakah sesuai dengan kondisi yang kita deklarasikan, jika benar maka kode dalam kondisi tersebut yang akan dieksekusi. Dengan kata lain media query memberikan kemampuan menggunakan kode css yang sesuai dengan kondisi yang ditentukan.
Eksternal & internal media query
Kita dapat menggunakan media query dengan cara berikut
Cara 1:
Dengan menggunakan tag <link> di dalam elemen head
Contoh:
Kode CSS:
<head>
<link rel=”stylesheet” media=”screen and (min-width: 600px)” href=”laptop_styles.css”>
<link rel=”stylesheet” media=”screen and (min-width: 320px) and (max-width: 360)” href=”mobile_styles.css”>
</head>Cara 2:
Kita definisikan dengan rule @media di dalam internal css atau file css terpisah
Contoh:
Kode CSS:
@media screen and (min-width: 240px) and (max-width: 480px) {
p {
font-size: 11px;
}
}Logika dalam CSS Media Query
Secara basic cara kerja media query menentukan, jika kondisi pernyataan benar(true) maka rules CSS kita akan diaplikasikan. Jika teman-teman lupa atau belum mengenal operator logika bisa baca disini.
- And
Agar rules kita dapat dieksekusi maka pernyataan kita harus bernilai benar secara berturut-turut
Contoh:
Kode CSS:
@media (min-width: 500px) and (max-width: 780px) {
body {
font-size: 16px;
background-color: red;
}
}- Or
Dalam media query operator or dilambangkan dengan tanda baca koma (,). rules dengan logika or memiliki arti dapat dieksekusi jika salah satu diantara pernyataannya benar
Contoh:
@media (min-width: 500px), (max-width: 780px) {
body {
font-size: 16px;
background-color: red;
}
}- Only
Only berfungsi untuk mencegah browser lama untuk menyentuh style untuk Android atau iPhone. Rules CSS hanya dapat dieksekusi jika semua query bernilai benar. Syarat menggunakan only adalah kita harus mengikut sertakan media type
Contoh:
@media only screen and (min-width: 240px) and (max-width: 480px) {
body {
font-size: 16px;
background-color: red;
}
}
Media Type
- all
Rules CSS kita cocok di semua jenis devices
Style kita dimaksudkan untuk ditampilkan pada dokumen cetak atau print preview
- screen
Nilai default media type. Style kita dikhususkan untuk tampilan layar.
- speech
Device yang memiliki kapabilitas speech
Media Features
Untuk menentukan kondisi kita bisa menyertakan media features di bawah ini dengan nilai batas nantinya sebuah rules akan dieksekusi. Media featurs harus berada dalam tanda kurung.
- width
- height
- device-width
- device-height
- aspect-ratio
- device-aspect-ratio
- color
- color-index
- monochrome
- resolution
- orientation
- scan
- grid
Contoh penggunaan
- (orientation: landscape)
- (orientation: potrait)
Beberapa memiliki min- dan max-. contoh
- (min-width: 200px)
- (max-width: 760px)
- (min-device-width: 200px)
- (max-device-width: 800px)
Lebih lanjut MDN – @media
Contoh penggunaan
Kode CSS:
@media only screen and (min-width: 400px) {
p {
background: red;
color: white;
}
}
@media only screen and (min-width: 600px) {
p {
background: green;
color: aliceblue;
}
}
@media only screen and (min-width: 700px) {
p {
background: blue;
color: white;
}
}Hasil
Penutup
Sekarang kita sudah mengenal dasar media query. Selamat kepada teman-teman karena sudah mengikuti course HTML & CSS sampai sini. Untuk teman-teman yang ingin mengikuti quiz course ini bisa berkunjung ke Quiz HTML & CSS Nusantech Academy.
Tamat dari course ini bukan berarti akhir pembelajaran. Teman-teman bisa mempelajari course lain di Nusantech Academy. Tetap semangat belajar dan berlatih!
See you next time!
