CSS - Media Queries: A Panduan Untuk Pemula

Hai, para pengembang web masa depan! Hari ini, kita akan masuk ke dunia yang menarik dari CSS Media Queries. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengarahkan Anda dalam perjalanan ini, langkah demi langkah. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - kita akan mulai dari dasar dan naik turun. Jadi, ambil secangkir kopi (atau tea, jika itu hal Anda), dan mari kita mulai!

Apa Itu Media Queries?

Sebelum kita masuk ke detailnya, mari pahami apa media queries itu. Bayangkan Anda mendesain sebuah website yang terlihat bagus di komputer Anda. Tetapi apa yang terjadi ketika seseorang melihatnya di ponselnya? Itu adalah tempat media queries berguna! Mereka memungkinkan website Anda untuk menyesuaikan diri dengan berbagai ukuran layar dan perangkat. Itu seperti memiliki website burung paus yang mengubah penampilannya berdasarkan lingkungannya.

Sintaks

Sekarang, mari kita lihat sintaks dasar dari media query:

@media mediatype and (condition) {
/* Aturan CSS disini */
}

Jangan biarkan ini menakutkan Anda! Kita akan membongkarnya:

• @media: Ini memberitahu browser, "Hey, saya tentang untuk menetapkan beberapa kondisi!"
• mediatype: Ini menentukan jenis media yang kita targetkan (kita akan bahas ini sebentar lagi).
• and: Ini adalah cara kita menggabungkan kondisi.
• (condition): Ini adalah tempat kita menetapkan kondisi khusus.

Tipe Media

Tipe media memberitahu browser jenis perangkat yang kita targetkan. Ini adalah yang utama:

Tipe Media	Deskripsi
all	Berlaku untuk semua perangkat
print	Untuk printer
screen	Untuk layar komputer, tablet, dan smartphone

Operator Logis

Kita dapat menggunakan operator logis untuk membuat query yang lebih kompleks:

Operator	Deskripsi
and	Menggabungkan beberapa fitur media
not	Menyongsong media query
only	Menerapkan gaya hanya jika keseluruhan query cocok
,	Menggabungkan beberapa media query

Tipe Media CSS - All

Tipe media all seperti pisau瑞士 Army knife – itu bekerja untuk semua perangkat. Ini adalah contoh:

@media all {
body {
background-color: lightblue;
}
}

Ini mengatur warna latar belakang menjadi biru muda untuk semua perangkat. Mudah, kan?

Tipe Media CSS - Print

Tipe media print sempurna untuk menyesuaikan halaman web Anda saat seseorang ingin mencetaknya. mari kita lihatnya dalam aksi:

@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}

Ini meningkatkan ukuran font untuk keadaan baca yang lebih baik dan menyembunyikan elemen dengan kelas no-print saat mencetak.

Tipe Media CSS - Screen

Tipe media screen adalah yang Anda akan gunakan paling sering. Itu untuk semua perangkat berbasis layar. Ini adalah contoh:

@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}

Ini membuat menu mencapai lebar penuh layar saat lebar layar adalah 600 pixel atau kurang.

Tipe Media CSS - Dengan Koma

Kita dapat menargetkan beberapa tipe media menggunakan koma. Itu seperti mengundang beberapa teman ke pesta:

@media screen, print {
body {
line-height: 1.5;
}
}

Ini mengatur tinggi baris untuk kedua tipe media layar dan cetak.

Tipe Media CSS - Dengan Only

Kata kunci only seperti penjaga di klub. Itu memastikan browser yang lebih tua yang tidak mendukung media query tidak menerapkan gaya:

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}

Media Query CSS - Rentang

Kita juga dapat menentukan rentang untuk kondisi kita:

@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}

Ini menyembunyikan sidebar saat lebar layar berada antara 600px dan 900px.

Fitur Media

Fitur media memungkinkan kita untuk menguji karakteristik khusus perangkat pengguna atau browser. Ini adalah beberapa yang umum:

Fitur	Deskripsi
width	Lebar viewport
height	Tinggi viewport
aspect-ratio	Rasio antara lebar dan tinggi
orientation	Lanskap atau potret
resolution	Densitas piksel perangkat

Membuat Media Query yang Kompleks

Mari kita gabungkan semuanya dengan contoh yang lebih kompleks:

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}

Ini membuat tata letak dua kolom untuk layar berorientasi lanskap antara 600px dan 900px lebar.

Media Query CSS - Menggabungkan Beberapa Tipe atau Fitur

Kita dapat menggabungkan beberapa tipe atau fitur menggunakan operator and:

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}

Ini menerapkan gaya ke layar antara 600px dan 900px lebar, atau saat mencetak di kertas hingga 600px lebar.

Media Query CSS - Menguji Beberapa Query

kadang-kadang, kita ingin menerapkan gaya jika salah satu dari beberapa query benar. Kita menggunakan koma untuk ini:

@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}

Ini membuat header sticky jika layar setidaknya 600px lebar atau berorientasi lanskap.

Media Query CSS - Membalikkan Arti Query

Kata kunci not memungkinkan kita untuk membalikkan arti query:

@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}

Ini membuat sidebar terapung kiri kecuali perangkat berorientasi lanskap.

Media Query CSS - Menyempurnakan Kompatibilitas Dengan Browser Lama

Untuk browser yang lebih tua yang tidak mendukung media query, kita dapat menyediakan gaya fallback:

.container {
width: 100%; /* Fallback untuk browser yang lebih tua */
}

@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}

Ini memastikan tata letak yang layak bahkan di browser yang tidak mengerti media query.

Dan itu adalah! Anda baru saja mengambil langkah pertama ke dunia desain web responsif dengan CSS Media Queries. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Selamat koding!

Credits: Image by storyset