Home » CSS » Media Queries di CSS: Jenis dan Cara Membuatnya

Media Queries di CSS: Jenis dan Cara Membuatnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Jenis Media yang Diperkenalkan CSS2

Aturan @media diperkenalkan di CSS2, digunakan untuk menemtukan style yang berbeda untuk tpe yang berbeda.

Contoh: Kita bisa memiliki satu set aturan style untuk layar komputer, satu untuk printer, satu untuk perangkat genggam, satu untuk perangkat jenis televisi, dan seterusnya.

Sayangnya jenis media ini tidak pernah mendapat banyak dukungan dari perangkat, selain jenis media cetak.

CSS3 Memperkenalkan Kueri Media

Kueri media di CSS3 memperluas ide jenis media CSS2: Alih-alih mencari jenis perangkat, mereka melihat kemampuan perangkat.

Kueri media dapat digunakan untuk memeriksa banyak hal, seperti:

  • lebar dan tinggi viewport
  • lebar dan tinggi perangkat
  • orientasi (apakah tablet / ponsel dalam mode lanskap atau potret?)
  • resolusi

Menggunakan kueri media adalah teknik yang populer untuk menyampaikan style sheet yang disesuaikan ke desktop, laptop, tablet, dan telepon seluler (seperti iPhone dan telepon Android).

Browser Pendukung


Menggunakan kueri media adalah teknik yang populer untuk menyampaikan lembar gaya yang disesuaikan ke desktop, laptop, tablet, dan telepon seluler (seperti iPhone dan telepon Android).

PropertyGoogle ChromeMicrosoft EdgeMozila FirefoxSafariOpera
@media21.09.03.54.09.0

Sintaks Kueri Media

Kueri media terdiri dari tipe media dan bisa berisi satu atau beberapa ekspresi, yang menghasilkan benar atau salah.

@media not|only mediatype and(expressions) {
  CSS-Code;
}

Hasil kueri adalah benar jika jenis media yang ditentukan cocok dengan jenis perangkat tempat dokumen sedang ditampilkan dan semua ekspresi dalam kueri media adalah benar. Jika kueri media benar,style sheet atau aturan style yang sesuai diterapkan mengikuti aturan normal

Kecuali jika kita ingin menggunakan operator not atau only, jenis media bersifat opsional dan semua jenis akan diterapkan.

kita juga bisa memiliki stylesheet berbeda untuk media yang berbeda:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Tipe Media CSS3

ValueDeskripsi
allDigunakan untuk semua perangkat jenis media
printDigunakan untuk perangkat printer
screenDigunakan untuk layar komputer, tablet, ponsel pintar dll.
speechDigunakan untuk pembaca layar yang “membaca” halaman dengan lantang

Contoh Sederhana Query Media

Salah satu cara untuk menggunakan kueri media adalah memiliki bagian CSS alternatif tepat di dalam style sheet.

Contoh berikut mengubah warna latar belakang menjadi hijau muda jika area pandang memiliki lebar 480 piksel atau lebih lebar (jika area pandang kurang dari 480 piksel, warna latar belakang akan menjadi merah muda):

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: pink;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>

</body>
</html>

Contoh berikut menunjukkan menu yang akan mengambang di sebelah kiri halaman jika viewport lebar atau lebih lebar 480 piksel (jika viewport kurang dari 480 piksel, menu akan berada di atas konten):

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#leftsidebar {
  float: none;
  width: auto;
}

#menulist {
  margin: 0;
  padding: 0;
}

.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>

<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
      <li class="menuitem">Menu-item 4</li>
      <li class="menuitem">Menu-item 5</li>
    </ul>
  </div>
  
  <div id="main">
    <h1>Resize the browser window to see the effect!</h1>
    <p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
  </div>
</div>

</body>
</html>

You may also like