Membuat Halaman Web yang Responsif

Coba teman-teman buka sebuah aplikasi web yang sering teman-teman gunakan pada browser komputer. Lalu buka juga aplikasi web yang sama pada browser ponsel kalian. Apakah tampilannya sama persis? atau ada perubahan? Jika web tersebut sudah menerapkan konsep responsive web design, seharusnya tampilannya akan disesuaikan untuk ditampilkan pada berbagai ukuran perangkat. Baik memindahkan beberapa komponen, menyesuaikan ukurannya dan sebagainya. Itulah yang akan kita pelajari pada materi kali ini.

Media Query: Fitur Ajaib pada CSS

Media query merupakan salah satu fitur pada CSS yang dapat dengan mudah kita gunakan untuk membuat tampilan web yang responsif. Ayo kita buat contoh sebuah halaman web yang responsif dengan media query!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.menu {
  float: left;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}
.right {
  background-color: lightblue;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;">

<div style="background-color:#f1f1f1;padding:15px;">
  <h1>Cinque Terre</h1>
  <h3>Resize the browser window</h3>
</div>

<div style="overflow:auto">
  <div class="menu">
    <div class="menuitem">The Walk</div>
    <div class="menuitem">Transport</div>
    <div class="menuitem">History</div>
    <div class="menuitem">Gallery</div>
  </div>

  <div class="main">
    <h2>The Walk</h2>
    <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
    <img src="img_5terre.jpg" style="width:100%">
  </div>

  <div class="right">
    <h2>What?</h2>
    <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
    <h2>Where?</h2>
    <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
    <h2>Price?</h2>
    <p>The Walk is free!</p>
  </div>
</div>


<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>

</body>
</html>

Pada contoh kode di atas, kita menggunakan membuat sebuah tampilan web yang awalnya hanya cocok ditampilkan pada ukuran desktop (laptop, komputer). Tapi berkat media query, kita dapat mengubah beberapa kode CSS pada beberapa ukuran perangkat lainnya yang kita kehendaki.

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}

Kita menambahkan potongan kode CSS di atas untuk menentukan mengubah beberapa properti pada kelas main jika ukuran perangkat yang kita gunakan kurang dari 800 piksel (biasanya cocok untuk perangkat tablet).

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}

Lalu, kiita juga menambahkan potongan kode CSS di atas untuk menentukan mengubah beberapa properti pada kelas main, menu dan right jika ukuran perangkat yang kita gunakan kurang dari 500 piksel (biasanya cocok untuk perangkat ponsel).

Seperti itulah penggunaan media query untuk membuat halaman web yang responsif. Biasanya kita menentukan terlebih dahulu target perangkat utama dari aplikasi yang kita buat. Contohnya membuat tampilan pada desktop terlebih dahulu (desktop first) atau tampilan pada perangkat ponsel terlebih dahulu (mobile first). Tidak semua aplikasi harus dibuat responsif, jika memang dirasa aplikasi tersebut sudah nyaman digunakan di satu jenis perangkat. Contohnya aplikasi administrasi yang memang sering digunakan pada laptop, tidak harus dibuat tampilan responsif untuk ponsel jika belum diperlukan.

Referensi

https://www.w3schools.com/html/html_responsive.asp

PreviousCSS Display dan CSS Position NextMembuat Tampilan Form Lebih Menarik

Last updated 2 years ago

hashtagMedia Query: Fitur Ajaib pada CSS

hashtagReferensi

Media Query: Fitur Ajaib pada CSS

Referensi