Belajar Responsive Web Design

 Responsive Web Design adalah cara membuat website kamu menjadi menarik di berbagai jenis device. Kita tahu jaman sekarang orang mengakses website, ada yang dari handphone, tablet, atau ukurang besar seperti televisi pun bisa. Karena itu penting membuat website kamu menjadi responsive.

Ada banyak teknik untuk membuat website kamu menjadi responsive, tanpa perlu membuat atau mengganti setiap tampilan secara keseluruhan.

Yang pasti kamu perlu memberitahu halaman tersebut kalau, tidak ingin di zoom saat di device yang lebih kecil,  dengan menggunakan

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

Lalu cara yang mudah untuk membuat sifat website kamu bisa beradaptasi sesuai ukurannya dengan menggunakan media query. Contoh penggunaan media query

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

Contoh memberi aturan CSS sendiri di ukuran yang maksimal 600px

Ukurannya bisa kamu atur sendiri. Untuk layar lebih kecil bisa menggunakan max-width. Sementara untuk menyasar device yang lebih besar, gunakan min-width.