Home » CSS » Contoh MQ di CSS: Cara Membuat dan Codenya

Contoh MQ di CSS: Cara Membuat dan Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I
by Hanifah Nurbaeti
by Hanifah Nurbaeti

Kueri Media CSS – Contoh Lainnya

Kueri media adalah teknik populer untuk mengirimkan style sheet yang disesuaikan ke perangkat yang berbeda. Untuk mendemonstrasikan contoh sederhana, kita bisa mengubah warna latar belakang untuk perangkat yang berbeda:

Contoh :

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

/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
  body {
    background-color: yellow;
    color: white;
  }
}

/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }
}
</style>
</head>
<body>

<h1> Ubah ukuran jendela browser untuk melihat efeknya! </h1>
<p> Secara default, warna latar belakang dokumen adalah "tan". Jika ukuran layar 992px atau kurang, warna akan berubah menjadi "kuning". Jika 600px atau kurang, itu akan berubah menjadi "zaitun". </p>

</body>
</html>

Kueri Media Untuk Menu

Dalam contoh ini, kita gunakan kueri media untuk membuat menu navigasi responsif yang desainnya bervariasi pada berbagai ukuran layar.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Responsive navigation menu</h2>
<p> Ubah ukuran jendela browser untuk melihat efeknya: Jika layar kurang dari 600px, menu navigasi akan ditampilkan secara vertikal, bukan horizontal. </p>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

</body>
</html>

Kueri Media Untuk Kolom

Kegunaan umum dari kueri media adalah untuk membuat tata letak yang fleksibel. Dalam contoh ini, kita buat tata letak yang bervariasi antara empat, dua, dan kolom lebar penuh, bergantung pada ukuran layar yang berbeda:

Contoh :

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

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2> Tata Letak Empat Kolom Responsif </h2>
<p> <strong> Ubah ukuran jendela browser untuk melihat efek responsif. </strong> Pada layar dengan lebar 992 piksel atau kurang, ukuran kolom akan diubah dari empat kolom menjadi dua kolom. Pada layar dengan lebar 600 piksel atau kurang, kolom akan bertumpuk, bukan di samping satu sama lain. </p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>kolom 1</h2>
    <p>teks..</p>
  </div>
  
  <div class="column" style="background-color:#bbb;">
   <h2>kolom 2</h2>
    <p>teks..</p>
  </div>
  
  <div class="column" style="background-color:#ccc;">
    <h2>kolom 3</h2>
    <p>teks..</p>
  </div>
  
  <div class="column" style="background-color:#ddd;">
    <h2>kolom 4</h2>
    <p>teks..</p>
  </div>
</div>

</body>
</html>

Tip: Cara yang lebih modern untuk membuat tata letak kolom adalah dengan menggunakan CSS Flexbox (lihat contoh di bawah). Namun, properti ini tidak didukung di Internet Explorer 10 dan versi sebelumnya.

Contoh :

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

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h2> Tata Letak Empat Kolom Responsif dengan Fleksibel </h2>
<p> <strong> Ubah ukuran jendela browser untuk melihat efek responsif. </strong> Pada layar dengan lebar 992 piksel atau kurang, ukuran kolom akan diubah dari empat kolom menjadi dua kolom. Pada layar dengan lebar 600 piksel atau kurang, kolom akan bertumpuk, bukan di samping satu sama lain. </p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>kolom 1</h2>
    <p>teks..</p>
  </div>
  
  <div class="column" style="background-color:#bbb;">
   <h2>kolom 2</h2>
    <p>teks..</p>
  </div>
  
  <div class="column" style="background-color:#ccc;">
    <h2>kolom 3</h2>
    <p>teks..</p>
  </div>
  
  <div class="column" style="background-color:#ddd;">
    <h2>kolom 4</h2>
    <p>teks..</p>
  </div>
</div>

</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 pada ukuran layar berbeda </h2>

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

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

</body>
</html>

Ubah Ukuran Font Dengan Kueri Media

Kita 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 600px atau kurang, setel ukuran font DIV ke 30px. Jika ukurannya 601 piksel atau lebih lebar, setel ukuran font menjadi 80 piksel. Ubah ukuran jendela browser untuk melihat efeknya. </p>

</body>
</html>

Galeri Gambar Fleksibel

Kali ini kita akan menggunakan kueri media dengan flexbox untuk membuat galeri gambar lebih responsif:

Contoh :

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
   <p> Ubah ukuran jendela browser untuk melihat efek responsif. </p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" style="width:100%">
  </div>
  
  <div class="column">
   <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" style="width:100%">
  </div> 
   
  <div class="column">
     <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

Situs Web Fleksibel

Dalam contoh ini, kita akan menggunakan kueri media bersama dengan flexbox untuk membuat situs web responsif yang berisi bilah navigasi fleksibel dan konten fleksibel.

Contoh :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Ubah ukuran browser untuk melihat flexbox responsive.</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>menggunakan<b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg" style="width:100%" >
    <p>text....</p>
    <h3>Pemandangan</h3>
    <p>beberapa pemandangan.</p>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
  </div>
  <div class="main">
    <h2>Anime</h2>
    <h5>Kimi No Nawa Cover</h5>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" style="width:100%" >
    <p>Anime</p>
    <p>Kimi no Nawa termasuk anime yang best dan sangat direkomendasikan untuk menontonnya.</p>
    <br>
    <h2>Anime</h2>
    <h5>Kimi No Nawa The Best</h5>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" style="width:100%" >
    <p>Anime Makoto Shinkai</p>
    <p>Rekomendasi anime romace</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

Orientasi: Potret / Lanskap

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

Lanskap ini merupakan sukumpulan properti CSS yang akan diterapkan ketika jendela browser lebih lebar dari tingginya.

Contoh
Gunakan warna 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>

Min Lebar ke Maks Lebar

Kita bisa menggunakan nilai (max-width: ..) dan (min-width: ..) untuk mengatur lebar minimum dan lebar maksimum.

Misalnya, saat lebar browser antara 600 dan 900px, ubah tampilan elemen <div> :

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
</style>
</head>
<body>

<h2> Ubah tampilan DIV pada berbagai ukuran layar </h2>

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

<p> Jika lebar peramban antara 600 dan 900 piksel, ubah tampilan DIV.
<strong> Ubah ukuran jendela browser untuk melihat efeknya </strong>. </p>

</body>
</html>

Gunakan nilai tambah: Pada contoh di bawah ini, kita tambahkan kueri media tambahan ke yang sudah ada menggunakan koma (ini akan berperilaku seperti operator OR):

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example{
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
</style>
</head>
<body>

<h2> Ubah tampilan DIV pada berbagai ukuran layar </h2>

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

<p> Saat lebar browser antara 600 dan 900px ATAU di atas 1100px, ubah tampilan DIV.
<strong> Ubah ukuran jendela browser untuk melihat efeknya </strong>. </p>

</body>
</html>

You may also like

Padding: Pengertian, Fungsi dan Sintaks

Cara Membuat Fullscreen Video

5 Framework CSS Terbaik Untuk Design WebsiteMu!

Ini Dia Tutorial CSS Flexbox Untuk Pemula (Beserta...

Memulai Mengembangkan Web: Pengenalan Singkat CSS

CSS + HTML: Cara membuat Gallery dengan Filter

Cara membuat Form di atas gambar dengan CSS...

Cara membuat Caption pada gambar dengan CSS +...

Cara membuat Zoom Product Image dengan CSS +...

Cara membuat Image Overlay Slide dengan CSS +...