Membuat kotak kontainer responsif dengan CSS.

Dengan meningkatnya penggunaan smartphone dan tablet, permintaan dan manfaat dari desain web responsif menjadi sangat penting dan semakin meningkat. Sebuah desain web responsif berarti desain yang bekerja secara fleksibel pada lebar berbagai resolusi layar, dari smartphone sampai ke komputer desktop. Sebagai pengembang web yang masih terhitung pemula seperti saya, hal ini membuat saya penasaran untuk belajar bagaimana desain responsif dapat diciptakan. Untungnya, kurva belajar tidak rumit sama sekali. Bahkan, ada banyak kerangka desain responsif dapat kita gunakan untuk membantu. Kerangka desain gratis populer disebut Bootstrap, dirilis di bawah lisensi MIT yang telah menjadi favorit di antara banyak pengembang dan merupakan pilihan yang perlu dipertimbangkan jika kita perlu untuk merancang sebuah situs web sepenuhnya responsif dari awal. Untuk tujuan pasal ini, saya ingin berbagi tips bagaimana untuk membuat kotak kontainer yang fleksibel dan merespon secara dinamis ke ruang horisontal tanpa JavaScript, full CSS.

Demo

HTML :

<div>Container 1</div>
<div>Container 2</div>
<div>Container 3</div>

CSS :

div{
   float: left;
   width: 33.333%;
   height: 100px;
   }

@media screen and (max-width: 800px){
   div{
   float: none;
   width: 100%;}
   }

Seperti yang terlihat di situs demo yang saya buat ada tiga kontainer berukuran sama, Jika lebar viewport 800 piksel atau kurang, kontainer akan disesuaikan dengan lebar 100 %; ideal untuk smartphone. @media screen and (max-width: 800px) adalah permintaan media yang berfungsi untuk menyesuaikan tampilan sesuai dengan ukuran pixel viewport yang menampilkannya. Hal ini memungkinkan kode CSS tertentu yang akan terbatas pada beberapa jenis perangkat atau resolusi. Media query tidak didukung di IE 8 dan sebelumnya, untuk mendukung browser lama, kita harus menggunakan sebuah perpustakaan JavaScript seperti Respond.js. Demikian saja yang dapat saya sampaikan pada kesempatan yang sangat singkat ini, semoga bermanfaat dan terimakasih banyak atas kunjungannya.

Referensi : http://blog.eukhost.com/webhosting/creating-responsive-html-containers-css/

Share this: