Pernahkah sobat melihat tampilan wap/web/blog sobat di berbagai perangkat atau ukuran layar baik melalui hp ataupun pc?
Ya tentunya kita melihat perbedaan ketika melihat situs kita melalui beberapa perangkat. Mungkin ketika melihat situs melalui perangkat mobile atau hp situs kita terlihat begitu bagus namun ketika melihat situs kita di perangkat pc terasa ada yang kurang.
Karena kita tidak bisa memperkirakan pengunjung kita menggunakan perangkat apa, Mungkin teknik Responsive design menjadi salah satu solusinya. Teknik ini cukup sederhana hanya perlu pemahaman tentang HTML dan CSS. Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart.
Bagaimana cara membuat dan menerapkannya pada situs XtGem kita?
Langsung saja simak langkah-langkah dibawah ini.
1. Masukan Meta tag Viewport
Pertama kita memasukan sebuah meta tag viewport pada halaman XtGem sobat di bawah tag <head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
@-wekit-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-moz-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-ms-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-o-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@viewport{width:device-width;max-zoom:2;min-zoom:0.5}
</style>
Saya rasa sobat sudah cukup paham dengan yang namanya css ini jadi saya tidak perlu menjelaskannya lagi. hehe.list{bakground: #fff;
color: #333;
max-width: 800px;}
.menu {margin: 3px;padding: 5px;}
.page {
border: 1px solid #333;
padding: 5px;
}
@media screen and (min-device-width:100px) and (max-device-width:130px) {.list {bakground: #fff;color: #333;padding:2px; max-width: 800px;}
.menu{margin:0;padding: 7px;}}
@media screen and (min-device-width:131px) and (max-device-width:400px) {.list {bakground: #fff;color: #333;padding:5px; max-width: 800px;}
.menu{margin:0;padding: 5px;}}
@media screen and (min-device-width:401px) and (max-device-width:1600px) {.list {bakground: #fff;color: #333;padding:2px; max-width: 800px;}
.menu{margin:3px;padding: 1px;background: #f00;}
.page{ margin: 3px;padding: 2px;}}
Komentar Untuk "Cara membuat Desain Responsive pada Situs Xtgem"
AH-SID
2014-07-22rangga
2014-07-22rangga
2014-07-22Author
2014-07-22W4rok
2014-08-10Hilmi-Kun
2015-09-23_Rims
2015-12-23ediy
2016-07-27KecoaTerbang
2018-06-23