Responsive Web

Pertama, bagi yang belum tau apa responsive web itu? Yaitu web yang tampilannya dapat menyesuaikan resolusi layar perangkat yang menampilkannya. Misal ketika dibuka pada monitor ukuran 1024, tampilan web akan terlihat penuh dan lengkap. Ketika dibuka dengan layar ponsel ukuran 240, lebar tampilan web pas dengan lebar layar, dan tidak perlu zooming untuk membaca konten yang ada.

Keunggulan responsive web yaitu dapat menyesuaikan lebar layar perangkat, sehingga tidak perlu zooming dan scrolling ke samping. Karena lebarnya bisa menyesuaikan, otomatis tata letak di dalamnya pun juga dapat disesuaikan sehingga lebih tampak tertata dilihat di layar manapun.
Untuk membuatnya, pertama dalam file html-nya berikan meta tag sebagai berikut :

<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>

Kemudian pengaturan layout/tata letaknya di css. Gunakan @media pada css nya, seperti berikut :

@media only screen and (min-width:1200px) {
            .container {
            width: 1000px;
            }
}
@media only screen and (min-width:968px) {
            .container {
            width: 900px;
            }
}


Dari script di atas dapat diartikan bahwa class container akan berubah-ubah lebarnya ketika ditampilkan di layar yang berbeda ukuran. Pada layar dengan resolusi minimal 1200px, lebar class container menjadi 1000px. Dan pada layar dengan resolusi minimal 968px, lebar class container menjadi 900px. Setidaknya dari contoh diatas sudah ada gambaran bagaimana responsive web itu. Jika ingin melihat contohnya Anda dapat melihat web karya saya di alamat alfaruqrucky.comyr.com. Sekian posting saya mengenai responsive web, semoga bermanfaat :)