Home » CSS » Media Query RWD di CSS: Cara Membuat dan Code Sintaknya

Media Query RWD di CSS: Cara Membuat dan Code Sintaknya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Apa itu Media Query?

Kueri media adalah teknik CSS yang diperkenalkan di CSS3.

Teknik ini menggunakan aturan @media untuk menyertakan blok properti CSS hanya jika kondisi tertentu benar.

Contoh
Jika jendela browser berukuran 600px atau lebih kecil, warna latar belakang akan menjadi biru muda:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p> Ubah ukuran jendela browser. Jika lebar dokumen ini 600 piksel atau kurang, warna latar belakangnya "biru muda", jika tidak, "hijau muda". </p>

</body>
</html>

Tambahkan Breakpoint

Sebelumnya dalam tutorial ini kita membuat halaman web dengan baris dan kolom, dan responsif, tetapi tidak terlihat bagus di layar kecil. Dengan menggunakan Media Query hal tersebut bisa di selesaikan. Kita dapat menambahkan breakpoint di mana bagian tertentu dari desain akan berperilaku berbeda di setiap sisi breakpoint.

Contoh
Saat layar (jendela browser) lebih kecil dari 768px, setiap kolom harus memiliki lebar 100%: “lightgreen”.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
    </ul>
  </div>

  <div class = "col-6">
     <h1> Kota </h1>
     <p> Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota dapat dibagi menjadi dua bagian, kota tua dan kota modern. </p>
   </div>

   <div class = "col-3 right">
     <div class = "disamping">
       <h2> Apa? </h2>
       <p> Chania adalah sebuah kota di Pulau Kreta. </p>
       <h2> Dimana? </h2>
       <p> Kreta adalah pulau Yunani di Laut Mediterania. </p>
       <h2> Bagaimana? </h2>
       <p> Anda dapat mencapai bandara Chania dari seluruh Eropa. </p>
     </div>
   </div>
</div>

<div class = "footer">
   <p> Ubah ukuran jendela browser untuk melihat bagaimana konten merespons pengubahan ukuran. </p>
</div>

</body>
</html>

Desain untuk Mobile First

Mobile First berarti mendesain untuk seluler sebelum mendesain untuk desktop atau perangkat lain (Ini akan membuat halaman ditampilkan lebih cepat di perangkat yang lebih kecil).

Berarti kita harus membuat beberapa perubahan pada CSS kita.

Alih-alih mengubah gaya saat lebarnya lebih kecil dari 768 piksel, kita harus mengubah desain saat lebarnya lebih besar dari 768 piksel. Hal ini yang akan membuat tampilan pertama untuk seluler:

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class = "row">
   <div class = "col-3 menu">
     <ul>
       <li> Penerbangan </li>
       <li> Kota </li>
       <li> Pulau </li>
       <li> Makanan </li>
     </ul>
   </div>

   <div class = "col-6">
     <h1> Kota </h1>
     <p> Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota dapat dibagi menjadi dua bagian, kota tua dan kota modern. </p>
   </div>

   <div class = "col-3 right">
     <div class = "disamping">
       <h2> Apa? </h2>
       <p> Chania adalah sebuah kota di Pulau Kreta. </p>
       <h2> Dimana? </h2>
       <p> Kreta adalah pulau Yunani di Laut Mediterania. </p>
       <h2> Bagaimana? </h2>
       <p> Anda dapat mencapai bandara Chania dari seluruh Eropa. </p>
     </div>
   </div>
</div>

<div class = "footer">
   <p> Ubah ukuran jendela browser untuk melihat bagaimana konten merespons pengubahan ukuran. </p>
</div>

</body>
</html>

Breakpoint lainnya

Kita bisa menambahkan breakpoint sebanyak yang kita suka.

Kita juga akan memasukkan breakpoint antara tablet dan ponsel.

Kita akan melakukan ini dengan menambahkan satu kueri media lagi (pada 600px) dan satu set kelas baru untuk perangkat yang lebih besar dari 600px (tetapi lebih kecil dari 768px):

Contoh
Perhatikan bahwa dua set kelas hampir identik, satu-satunya perbedaan adalah nama (col- dan col-s-):

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Mungkin tampak aneh bahwa kita memiliki dua set kelas yang identik, tetapi ini memberi kita kesempatan dalam HTML untuk memutuskan apa yang akan terjadi dengan kolom di setiap breakpoint:

Contoh HTML

Untuk desktop:

Bagian pertama dan ketiga masing-masing akan memiliki 3 kolom. Bagian tengah akan memiliki 6 kolom.

Untuk tablet:

Bagian pertama akan mencakup 3 kolom, yang kedua akan mencakup 9, dan bagian ketiga akan ditampilkan di bawah dua bagian pertama, dan itu akan mencakup 12 kolom:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class = "row">
   <div class = "col-3 menu">
     <ul>
       <li> Penerbangan </li>
       <li> Kota </li>
       <li> Pulau </li>
       <li> Makanan </li>
     </ul>
   </div>

   <div class = "col-6">
     <h1> Kota </h1>
     <p> Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota dapat dibagi menjadi dua bagian, kota tua dan kota modern. </p>
   </div>

   <div class = "col-3 right">
     <div class = "disamping">
       <h2> Apa? </h2>
       <p> Chania adalah sebuah kota di Pulau Kreta. </p>
       <h2> Dimana? </h2>
       <p> Kreta adalah pulau Yunani di Laut Mediterania. </p>
       <h2> Bagaimana? </h2>
       <p> Anda dapat mencapai bandara Chania dari seluruh Eropa. </p>
     </div>
   </div>
</div>

<div class = "footer">
   <p> Ubah ukuran jendela browser untuk melihat bagaimana konten merespons pengubahan ukuran. </p>
</div>


</body>
</html>

Titik Henti Perangkat Khusus

Ada banyak sekali layar dan perangkat dengan perbedaan tinggi dan lebarnya, sehingga sulit untuk membuat breakpoint yang tepat untuk setiap perangkat. Untuk menyederhanakan, kita akan menargetkan lima kelompok:

Contoh :

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
  padding: 20px;
  color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}
</style>
</head>
<body>

<h2>Typical Media Query Breakpoints</h2>
<p class = "example"> Ubah ukuran jendela browser untuk melihat bagaimana warna latar belakang paragraf ini berubah pada ukuran layar yang berbeda. </p>

</body>
</html>

Orientasi: Potret / Lanskap

Kueri media juga dapat digunakan untuk mengubah tata letak halaman bergantung pada orientasi browser.

Kita bisa memiliki sekumpulan properti CSS yang hanya akan diterapkan ketika jendela browser lebih lebar dari tingginya, yang disebut orientasi “Lanskap”:

Contoh
Halaman web akan memiliki latar belakang biru muda jika orientasi dalam mode lanskap:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p> Ubah ukuran jendela browser. Jika lebar dokumen ini lebih besar dari tingginya, warna latar belakangnya adalah "biru muda", jika tidak, "hijau muda". </p>

</body>
</html>

Sembunyikan Elemen Dengan Kueri Media

Penggunaan umum kueri media lainnya adalah menyembunyikan elemen pada ukuran layar yang berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: yellow;
  padding: 20px;
}

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
</style>
</head>
<body>

<h2>Sembunyikan Elemen Dengan Kueri Media</h2>

<div class="example">Contoh DIV.</div>

<p> Jika lebar browser adalah 600px atau kurang, sembunyikan elemen div. Ubah ukuran jendela browser untuk melihat efeknya. </p>

</body>
</html>

Ubah Ukuran Font Dengan Media Queries

Kita juga bisa menggunakan kueri media untuk mengubah ukuran font suatu elemen pada berbagai ukuran layar:
.
Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}

@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
</style>
</head>
<body>

<h2> Ubah ukuran font suatu elemen pada berbagai ukuran layar </h2>

<div class = "example"> Contoh DIV. </div>

<p> Jika lebar peramban adalah 600 piksel atau kurang, setel ukuran font DIV menjadi 30 piksel. Jika ukurannya 601px atau lebih lebar, setel ukuran font menjadi 80px. Ubah ukuran jendela browser untuk melihat efeknya. </p>
</body>
</html>

You may also like