Selasa, 21 Mei 2013

Cara Mudah Membuat Web Responsive

Cara mudah membuat respnsive web adalah dengan menambah elemen @media-query pada CSS. Untuk lebih detailnya, mari kita simak baik-baik tahapannya.
Tapahan pertama, anda harus memahami lebar dari desain situs website anda. Antara lain lebar container, wrapper, maupun main.
Sebelumnya, responsive web adalah tampilan dimana saat pengguna melihat situs kita dengan PC, tablet, atau mobile phone maka desain tampilan akan mengikuti lebar alat yang digunakan dalam mengakses situs tersebut.
Tahap kedua adalah membuat query dari yang paling besar dahulu.

@media screen and (max-width: 860px) {

.wrapper {
        width: 95% ;  }

body {font-size: 1em;
        line-height: 1.44;}

p {font-size: 0.8em;}
}

Ukuran 860, wrapper dibuat menjadi 95% dari lebar layar, ukuran font pada body dibuat 1em dengan line-height 1.44. Dan font postingan dirubah menjadi 0.8em

@media screen and (max-width:767px) {
 
#shapeworksbutton {bottom: 52px;
        left: 10px;}
 
#copyright {
        padding: 100px 0 0 10px;}
 
#primary, #html5logo, #codecanyon {display:none;}
 
#iklan {display:none;}
 
}

Hilangkan elemen yang dianggap mengganggu pada ukuran 767, dan sesuaikan letak iklan pada bagian paling bawah.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), screen and (max-width: 550px) {
 
body {
        font-size:0.7em; 
    }
p {
        font-size: 0.7em;}
 
.wp-pagenavi {display:none;}
 
}

Pada ukuran responsive terkecil dalam sebuah situs atau website mengubah min-device-width : 320px, menghilangkan .wp-pagenavi dan mengecilkan ukuran font menjadi 0.7em agar besar font sesuai dengan tampilan handphone.
Dengan demikian, cara membuat web pesponsive jadi lebih mudah kan?!

Contoh web responsive
 

Tidak ada komentar:

Posting Komentar