Kueri media

Desainer dapat menyesuaikan desain mereka untuk mengakomodasi pengguna. Contoh paling jelas dari hal ini adalah faktor bentuk perangkat pengguna; lebarnya, rasio aspek perangkat, dan seterusnya. Dengan menggunakan kueri media, desainer dapat merespons faktor bentuk yang berbeda ini.

Kueri media dimulai dengan kata kunci @media (CSS aturan), dan dapat digunakan untuk berbagai kasus penggunaan.

Menargetkan berbagai jenis output

Situs sering ditampilkan di layar, tetapi CSS juga dapat digunakan untuk menata gaya situs untuk output lainnya. Anda mungkin ingin halaman web terlihat satu arah di layar tetapi berbeda saat dicetak. Membuat kueri jenis media memungkinkan hal ini.

Dalam contoh ini, warna latar belakang disetel ke abu-abu. Namun, jika halaman dicetak, warna latar belakang harus transparan. Tindakan ini akan menghemat tinta printer pengguna.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Anda dapat menggunakan @media pada-rule di stylesheet seperti itu, atau Anda dapat membuat stylesheet terpisah dan menggunakan atribut media pada elemen link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Jika Anda tidak menentukan jenis media apa pun untuk CSS, media tersebut akan otomatis memiliki nilai jenis media all. Kedua blok CSS ini setara:

body {
  color: black;
  background-color: white;
}
@media all {
   body {
     color: black;
     background-color: white;
   }
}

Dua baris HTML ini juga setara:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">

Kondisi kueri

Anda dapat menambahkan kondisi ke jenis media. Ini disebut kueri media. CSS hanya diterapkan jika jenis medianya cocok dan kondisinya juga benar. Kondisi ini disebut fitur media.

Ini adalah sintaksis untuk kueri media:

@media type and (feature)

Anda dapat menggunakan kueri media di elemen link jika gaya Anda berada di stylesheet terpisah:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Katakanlah Anda ingin menerapkan gaya yang berbeda bergantung pada apakah jendela browser berada dalam mode lanskap atau tidak (lebar area pandang lebih besar dari tingginya) atau mode potret (tinggi area pandang lebih besar dari lebarnya). Ada fitur media bernama orientation yang dapat Anda gunakan untuk mengujinya:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Atau jika Anda memilih untuk memiliki stylesheet terpisah:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

Dalam hal ini, jenis medianya adalah all. Karena itu adalah nilai defaultnya, Anda dapat membiarkannya:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Atau menggunakan stylesheet terpisah:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Meskipun menggunakan stylesheet terpisah untuk jenis media yang berbeda—seperti print—tidak apa-apa, mungkin sebaiknya gunakan stylesheet terpisah untuk setiap kueri media. Sebagai gantinya, gunakan @media di aturan.

Menyesuaikan gaya berdasarkan ukuran area pandang

Untuk desain responsif, salah satu fitur media yang paling berguna melibatkan dimensi area pandang browser. Untuk menerapkan gaya saat jendela browser lebih lebar dari lebar tertentu, gunakan min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Gunakan fitur media max-width untuk menerapkan gaya di bawah lebar tertentu:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Anda dapat menggunakan unit panjang CSS apa pun di kueri media. Jika konten Anda sebagian besar berbasis gambar, piksel mungkin adalah pilihan yang paling tepat. Jika konten Anda sebagian besar berbasis teks, mungkin akan lebih masuk akal untuk menggunakan unit relatif yang didasarkan pada ukuran teks, seperti em atau ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Anda juga dapat menggabungkan kueri media untuk menerapkan lebih dari satu kondisi. Gunakan kata and untuk menggabungkan kueri media Anda:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Memilih titik henti sementara berdasarkan konten

Titik saat kondisi fitur media menjadi benar (true) disebut titik henti sementara. Sebaiknya pilih titik henti sementara berdasarkan konten Anda daripada ukuran perangkat yang populer, karena fitur tersebut dapat berubah di setiap siklus rilis teknologi.

Dalam contoh ini, 50em adalah titik saat baris teks menjadi terlalu panjang. Jadi, titik henti sementara dibuat untuk membuat antarmuka lebih mudah dibaca. Dengan menggunakan properti column-count, teks dibagi menjadi dua kolom mulai dari titik tersebut.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Kombinasi

Anda dapat menggunakan kueri media berdasarkan tinggi area pandang, bukan hanya lebarnya. Hal ini berguna untuk mengoptimalkan konten antarmuka di "paruh atas". Pada contoh sebelumnya, jika pembaca menggunakan jendela browser yang lebar tetapi singkat, mereka harus menggulir ke bawah satu kolom dan kemudian menggulir kembali ke atas untuk sampai ke bagian atas kolom kedua. Akan lebih aman untuk hanya menerapkan kolom saat area pandang cukup lebar dan cukup tinggi.

Anda dapat menggabungkan kueri media sehingga gaya hanya diterapkan jika semua kondisi benar. Dalam contoh ini, area pandang setidaknya harus memiliki lebar 50em dan tinggi 60em agar gaya kolom dapat diterapkan. Titik henti sementara tersebut dipilih berdasarkan jumlah konten.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Contoh-contoh ini menunjukkan bagaimana kueri media dapat digunakan untuk menyesuaikan desain dengan faktor bentuk perangkat pengguna, tapi ini hanyalah sedikit permulaan kemungkinan. Kueri media bisa jauh melampaui lebar dan tinggi, mengakses preferensi pengguna untuk fitur aksesibilitas dan warna tema. Menggunakan kueri media untuk membuat penyesuaian tata letak adalah awal yang baik untuk desain responsif, yang dibangun di atas fitur-fitur ini dan banyak lagi.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang kueri media responsif.

Kueri media hanya ada untuk ukuran layar?

true
Coba lagi. Kueri media untuk hal-hal seperti preferensi sistem cetak, gelap dan terang, dan banyak lagi.
salah
🎉

Layar adalah satu-satunya tempat konten web digunakan atau ditampilkan?

true
Coba lagi. Sebuah situs web dapat dicetak di atas kertas, di-crawl oleh spider mesin telusur, dibacakan dengan keras oleh teknologi pembaca layar, atau bahkan dibacakan oleh bot melalui asisten.
salah
🎉

Jenis media default adalah?

screen
Coba lagi. screen bukan jenis default.
none
Coba lagi. none bukan jenis media yang valid.
all
🎉
some
Coba lagi. some bukan jenis media yang valid.
landscape
Coba lagi. landscape bukan jenis media yang valid.

Apa yang akan Anda gunakan untuk mencegah browser menskalakan desain pada seluler?

width: 100%
Coba lagi.
font-size: 200%
Coba lagi.
<meta name="viewport" content="width=device-width, initial-scale=1">
🎉
Kueri Media
Coba lagi.
HTML5
Coba lagi.

Kueri media mana yang berlaku saat jendela browser berada di atas 720px.

@media (width: 720px)
Coba lagi. Kueri media ini hanya jika jendela browser sama dengan 720px.
@media (max-width: 720px)
Coba lagi. Kueri media ini digunakan saat jendela browser di bawah 720px.
@media (min-width: 720px)
🎉 Anda dapat membaca ini karena jendela browser setidaknya berukuran 720px.
@media (clamp-width: 720px)
Coba lagi. clamp-width bukan kondisi fitur kueri media yang valid.