cara membuat responsive web design

responsive web design(media queries) adalah sebuah web yang ukuran skalanyanya bisa membesar dan mengecil sesuai dengan ukuran layar yang digunakan untuk mengakses web tersebut, responsive web design merupakan hal yang memang perlu dikuasai jika memang kita ingin menjadi web developer, hal ini akan mempengarui UX(User Experience) yaitu pengalaman yang dirasakan oleh para pengunjung web kita, tentunya para pengunjung web akan lebih mudah jika website yang kita buat sesuai dengan ukuran layar.

ok langsung saja, berikut langkah-langkahnya:

1. sisipkan kode berikut ke bagian head html yang kita buat.

2.untuk gambar contoh di nomor satu diatas simpan file dengan nama responsive.css dan berdasarkan gambar diatas letakkan file di dalam folder css.

3.buka file tersebut dengan text editor(saya menggunakan sublime text 3) dan tulis kode css sesuai dengan bagian html mana yang ingin di desain. seperti kode css biasanya karena semua kode css yang kita tulis di file ini(responsive.css) hanya akan bekerja pada ukuran 900px ke bawah seperti gambar pertama yang saya tunjukan diatas. dan yang perlu kita tahu disini adalah kita juga bisa mengatur ukuran layar tertentu untuk mengatur pada besaran berapa kode kita bekerja dengan menggunakan @media screen and (max-width:1000px) seperti gambar berikut

ok seperti itulah langkah-langkah membuat responsive website. sampai jumpa di update selanjutnya.