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