Sekarang ini jamannya web responsive yang tampilannya dapat menyesuaikan dengan perangkat yang digunakan dalam mengakses situs tersebut. Dan ini lebih banyak digemari oleh pengguna, terutama pengguna yang mengakses dengan menggunakan smartphone. Maka dari itu, website anda perlu menggunakan tampilan web responsive, untuk memudahkan pengguna.
Berikut cara membuat web menjadi
responsive dengan menggunakan css3 :
-
Meta Tag Desain
Responsive
Anda dapat menggunakan meta tag untuk me-reset desain sehingga bisa
tampil pas di layar mobile. Untuk memberi tahu browser untuk menggunakan lebar
perangkat sebagai lebar viewport dan menonaktifkan skala awal digunakan tag viewport.
Sertakan meta tag ini di bagian <head>
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0”>
Untuk Internet explorer versi 8 kebawah menggunakan tag berikut :
<!--[if It IE 9]>
<scipt src=” http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]-->
-
Struktur HTML
Buat stuktur HTML dengan header, content, sidebar, dan footer. Misal
tinggi header 200 pixel, lebar content 660 pixel, lebar sidebar 300 pixel. Dan total
lebar keseluruhan adalah 960 pixel.
-
Membuat Media Query
Mendesain web reponsif menggunakan CSS3 merupakan suatu trik. Dan membuat
trik ini di CSS3 sama dengan pemrograman dengan membuat suatu kondisi (if),
yang mana CSS3 memberikan kondisi untuk browser harus merender halaman untuk
viewport yang telah di setting lebarnya.
Contoh trik CSS3 untuk lebar viewport ukuran 980 pixel kebawah.
@media screen and (max-width:980px) {
#pagewarp {
width:96%;
}
#content{
width:66%;
}
#sidebar{
width:30%;
}
}
Untuk viewport ukuran 700 pixel kebawah, tentukan ukuran content
dan sidebar ke ukuran auto width dan disable float. Dengan script ini, maka
akan tampil sejajar kebawah mengikuti lebar layar.
@media screen and (max-width:700px) {
#content{
width:auto;
float:none;
}
#sidebar{
width:auto;
float:none;
}
}
Untuk ukuran 480 pixel kebawah yaitu untuk ukuran handphone ,
sembunyikan sidebar dan ukuran tinggi header menjadi auto.
@media screen and (max-width:700px) {
#header{
height:auto;
}
#sidebar{
display:none;
}
}
Artikel diatas merupakan contoh desain responsive yang memberikan
tampilan berbeda untuk setiap ukuran viewport.
Tidak ada komentar:
Posting Komentar