INDONESIANWARE - Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Desain Responsive pada website, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel CSS,
Artikel OPINI,
Artikel PEMROGRAMAN WEB,
Artikel Tips dan Trik, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Cara Membuat Desain Responsive pada website
link : Cara Membuat Desain Responsive pada website
Cara Membuat Desain Responsive pada website
Cara Membuat Desain Responsive pada website, Sebenarnya ada yang mudah jika ingin membuat responsive desain, kamu bisa menggunakan css framework seperti bootstrap atau pure. Namun sebagai ilmu tambahan bagaimana framework tersebut bisa membuat desain yang menyesuaikan devicenya masing-masing.
Pertama awali dengan script html 5 sebagai pengenalnya, cukup beri pengenal dokumen dengan <!DOCTYPE> sebelum tag <html>, kemudian didalam head atau setelah tag <head> tambahkan script <meta name="viewport"
content="width=device-width, initial-scale=1.0"> yang gunanya untuk mengetahui bahwa browser yang akses menggunakan device yang akan disesuaikan.
Tinggal di CSS kamu sesuaikan dengan script didalamnya seperti contoh di bawah ini :
@media (max-width: 640px){
#container{
width:630px;
margin:0 auto;
}
.content{ margin-top:30px;}
}
@media (max-width: 568px){
#container{
width:550px;
margin:0 auto;
}
.content{ margin-top:30px;}
.menu{display:none;}
.nav{display:block; width:95%; margin:0 auto; margin-top:30px; padding:5px;}
}
@media (max-width: 480px){
#container{
width:470px;
margin:0 auto;
}
.content{ margin-top:30px;}
.menu{display:none;}
.nav{display:block; width:95%; margin:0 auto; margin-top:30px; padding:5px;}
}
@media (max-width: 360px){
#container{
width:350px;
margin:0 auto;
}
.content{ margin-top:30px;}
.menu{display:none;}
.nav{display:block; width:95%; margin:0 auto; margin-top:30px; padding:5px;}
}
@media (max-width: 320px){
#container{
width:310px;
margin:0 auto;
}
.content{ margin-top:30px;}
.menu{display:none;}
.nav{display:block; width:95%; margin:0 auto; margin-top:30px; padding:5px;}
}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
Biar ga’ bingung kamu bisa download dari link di bawah ini beserta contohnya, nah untuk testnya kamu bisa liat halaman ini http://www.gee.web.id/2013/11/developer-tools-to-check-your-browser.html liat bagian mozilla.
Sekianlah artikel Cara Membuat Desain Responsive pada website kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara Membuat Desain Responsive pada website dengan alamat link https://ware-id.blogspot.com/2013/12/cara-membuat-desain-responsive-pada.html
EmoticonEmoticon