Cara Membuat Desain Responsive pada website, Sebenarnya ada yang mudah jika ingin membuat responsive desain, kamu bisa menggunakan css fr...
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.
COMMENTS