Agar Gampang Dalam Menciptakan Layout Responsive

Dalam mencar ilmu menciptakan template blog bagi blogger belajar sendiri menyerupai aku tentunya banyak percobaan dan kegagalan. Namun dari kegagalan-kegagalan itulah yang menciptakan aku semakin tertantang untuk sanggup memperbaikinya dan menjadi pelajaran berharga.

Nah pagi ini aku akan coba menyebarkan pengalaman dalam mencar ilmu CSS style, khususnya yang menyangkut layout responsive. Ini nantinya sanggup Anda coba aplikasikan dalam template blog responsive. Dengan ini kita akan lebih gampang dan lebih sederhana dalam memilih media query-nya.

Biasanya yang paling banyak memerlukan media query yaitu penentuan lebar element untuk tiap-tiap jenis device. Apalagi jikalau kita memakai satuan pixel, maka akan lebih banyak lagi css style yang diharapkan dalam media query.

Untuk itu, semoga layout lebih flexible sehingga sanggup mengirit css style dalam media query, dalam menciptakan layout responsive sebaiknya memakai satuan persen (%) dan auto untuk lebar layout. Namun dalam pergunaan % dan auto pun harus cermat alasannya jikalau tidak sempurna maka tampilannya akan berantakan. Sebagai tumpuan sanggup Anda lihat pada gambar di bawah ini.

Agar lebih terang lagi, silahkan Anda coba pada link demo di bawah ini, lalu 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 tumpuan untuk layout responsive sederhana menyerupai 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 memilih lebar layout pada lebar tertentu.

Sumber https://www.kompiajaib.com/

Share this post