Responsive Web Design HTML

Responsive Web Design atau desain web responsif adalah tentang membuat halaman web yang terlihat bagus di semua perangkat.

Desain web yang responsif akan secara otomatis menyesuaikan ukuran layar dan area pandang yang berbeda.

Apa itu Responsive Web Design?

Responsive Web Design adalah menggunakan HTML dan CSS untuk secara otomatis mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar situs web agar terlihat bagus di semua perangkat (desktop, tablet, dan ponsel).

Mengatur Viewport (Halaman Pandang)

Untuk membuat situs web yang responsif, tambahkan <meta> tag berikut dibawah ini ke semua halaman web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ini akan mengatur viewport halaman web, yang akan memberikan instruksi browser tentang cara mengontrol dimensi dan penskalaan halaman.

Responsive Images (Gambar Responsif)

Gambar responsif adalah gambar yang diskalakan dengan baik agar sesuai dengan ukuran browser apa pun.

Menggunakan Properti lebar

Jika properti width CSS diset ke 100%, gambar akan responsif dan skala naik dan turun:

<img src="img_boy.jpg" style="width:100%;">

Menggunakan Properti max-width

Jika properti max-width diset ke 100%, gambar akan diperkecil jika harus, tetapi tidak pernah ditingkatkan menjadi lebih besar dari ukuran aslinya:

<img src="img_boy.jpg" style="max-width:100%;height:auto;">

Menunjukkan Gambar Berbeda Tergantung Lebar Browser

Elemen <picture> HTML memungkinkan kita menentukan gambar yang berbeda untuk ukuran jendela browser yang berbeda.

Ubah ukuran jendela browser untuk melihat bagaimana gambar di bawah ini berubah tergantung pada lebarnya:

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Responsive Text Size (Ukuran Teks Responsif)

Ukuran teks dapat diatur dengan unit "vw", yang berarti "lebar viewport".

Dengan begitu, ukuran teks akan mengikuti ukuran jendela browser:

<h1 style="font-size:10vw">Hello World</h1>

Catatan: Area pandang adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm.

Media Queries

Selain mengubah ukuran teks dan gambar, penggunaan media queries juga umum di halaman web yang responsif.

Dengan media queries kita dapat menentukan style yang sangat berbeda untuk ukuran browser yang berbeda.

Contoh:

<style>
.left, .right {
  float: left;
  width: 20%; /* Lebar (width) 20%, secara default */
}

.main {
  float: left;
  width: 60%; /* Lebar (width) 60%, secara default */
}

/* Gunakan media query untuk menambah breakpoint di 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* Lebar (width) 100%, ketika viewport 800px atau lebih kecil */
  }
}
</style>

Sumber referensi: w3schools