Walaupun sudah menetapkan meta tag viewport, tampilan pada mobile device belum baik, karena informasi yang ditampilkan pada elemen 

201912070002124863061b64d7caa2343e5afeea261651.png
Untuk mengatasi hal ini, CSS menyediakan sebuah fitur yang dapat kita gunakan untuk menentukan rule hanya pada ukuran viewport tertentu. Fitur tersebut dinamakan CSS Media Queries. Berikut contoh penulisannya:


  1. /* Rule yang dituliskan dalam block @media di bawah akan diterapkan pada device yang memiliki ukuran viewport di bawah 992px */

  2. @media screen and (max-width: 992px) {

  3.   ........

  4.  }

  5.   /* Rule yang dituliskan dalam block @media di bawah akan diterapkan pada device yang memiliki ukuran viewport di bawah 600px */

  6.  @media screen and (max-width: 600px) {

  7.     ........

  8.  }


Canggih bukan? Setelah mengetahui fitur media queries, kita dapat memperbaiki halaman profil dengan memindahkan elemen 

Untuk melakukannya kita buat elemen 


  1. @media screen and (max-width: 1000px) {

  2.    #content,

  3.    aside {

  4.        width: 100%;

  5.        padding: 0;

  6.    }

  7. }


Dengan menerapkan media query, sekarang halaman profil dapat menyesuaikan tampilan ketika diakses oleh  peranti mobile.
20191207000506fa5d9800618cf6add3cb05204f8a83c8.gif
Selamat! Sampai dengan materi ini kita sudah dapat membuat sebuah website dengan tampilan yang menarik, Ingin paham lebih jauh tentang konsep responsive pada website? Anda bisa membaca artikel yang ada pada blog kami atau bisa membaca dokumentasi yang diberikan oleh Google mengenai ini.