Agar Mudah Dalam Membuat Layout Responsive

Dalam belajar membuat template blog bagi blogger otodidak seperti saya tentunya banyak percobaan dan kegagalan. Namun dari kegagalan-kegagalan itulah yang membuat saya semakin tertantang untuk bisa memperbaikinya dan menjadi pelajaran berharga.

Nah pagi ini saya akan coba berbagi pengalaman dalam belajar CSS style, khususnya yang menyangkut layout responsive. Ini nantinya bisa Anda coba aplikasikan dalam template blog responsive. Dengan ini kita akan lebih mudah dan lebih sederhana dalam menentukan media query-nya.

Biasanya yang paling banyak memerlukan media query adalah penentuan lebar element untuk tiap-tiap jenis device. Apalagi jika kita menggunakan satuan pixel, maka akan lebih banyak lagi css style yang diperlukan dalam media query.

Untuk itu, agar layout lebih flexible sehingga dapat mengirit css style dalam media query, dalam membuat layout responsive sebaiknya menggunakan satuan persen (%) dan auto untuk lebar layout. Namun dalam pergunaan % dan auto pun harus cermat karena jika tidak tepat maka tampilannya akan berantakan. Sebagai contoh bisa Anda lihat pada gambar di bawah ini.

Agar lebih jelas lagi, silahkan Anda coba pada link demo di bawah ini, kemudian geser-geser batas kotaknya untuk melihat responsivenya.

• JSFiddle

Untuk width:100% gunakan untuk elemen paling luar dengan padding kiri kanan 0. Untuk elemen di dalamnya silahkan gunakan width:auto dengan display:block dan atur margin untuk memberi jarak dengan elemen luarnya.

Sebagai contoh untuk layout responsive sederhana seperti di bawah ini.

Kode HTML

<div class="content-wrapper">
    <div class="header-wrapper">
        Header
    </div>
    <div class="outer-wrapper">
        <div class="main-wrapper">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="sidebar-wrapper">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
    <div style="clear:both"></div>
<div class="footer-wrapper">
    Footer
    </div>
</div>

Kode CSS

.content-wrapper{
    width:100%;
    padding:20px 0;
    margin:0 auto 50px;
    background:#ddd;
}
.header-wrapper{
    width:auto;
    height:auto;
    margin:0 20px;
    padding:20px;
    background:#666;
    display:block;
}
.outer-wrapper{
    width:auto;
    height:auto;
    margin:20px;
    padding-bottom:0;
    display:block;
}
.main-wrapper{
    width:60%;
    height:auto;
    margin:0;
    padding:0;
    background:#666;
    float:left;
    word-wrap:break-word;
    overflow:hidden;
}
.sidebar-wrapper{
    width:36%;
    height:auto;
    margin:0;
    padding:0;
    background:#666;
    float:right;
    word-wrap:break-word;
    overflow:hidden;
}
p{margin:20px}
.footer-wrapper{
    width:auto;
    height:auto;
    margin:20px 20px 0;
    padding:20px;
    background:#666;
    display:block;
}
@media screen and (max-width:320px){
    .outer-wrapper{margin-bottom:0}
    .main-wrapper,.sidebar-wrapper{width:100%;float:none}
    .sidebar-wrapper{margin-top:20px}
}

JSFiddle

Seperti terlihat pada CSS style di atas, di situ hanya memerlukan css sederhana pada media query untuk menentukan lebar layout pada lebar tertentu.