Pasti keren website teman sekalian bisa dibuka dimana saja dan kapan saja.Nah oleh karena itu penting juga nih buat baca tutorial kali ini.
Responsive template artinya menyesuaikan keadaan monitor atau layar.
Sudah tidak asing lagi responsive template bagi para web designer advanced atau pun beginer.
Disini kita gak langsung bikin dengan gambar seperti background atau gambar lainnya :p ,biar bisa cepat dimengerti saja ya.
Oke wait,Ane upload dulu gambar desain contohnya.
1Menit kemudian.
Nah ini adalah Cssnya.
<style type="text/css">
#layout { width: 100%;}#layout .konten { margin: auto; width: 900px; background-color: #CCCCCC;}#layout .konten .header { float: left; width: 100%; height: 100px; background-color: #99CC00;}#layout .konten .menu { float: left; width: 100%; background-color: #99CCCC;}#layout .konten .body { float: left; width: 600px; background-color: #00CCFF; height: 400px; text-align: center;}#layout .konten .footer { padding: 1px; clear: both; width: 99%;}#layout .konten .side { background-color: #FF0000; float: left; height: 200px; width: 300px;}
</style>Script css diselipkan di antar <head></head>
Dan ini adalah bagian Htmlnya
<div id="layout">
<div class="konten">
<div class="header"><h1>Logo</h1></div>
<div class="menu">Menu</div>
<p> </p>
<div class="body">Konten Website</div>
<div class="side">Side Bar</div>
<p> </p>
<div class="footer"></div>
</div>
<p> </p>
<p> </p>
</div>
Maka akan menjadi tampilah seperti di gambar.
Jika anda menggunakan mozilla firefox.Klik Tools > Web Developers > Responsive Design View.
Maka anda tidak akan mendapati tampilan handphonenya.
Bagaimana untuk menjadikannya Responsive seperti ini?
Jawabannya adalah dengan menggunakan script css ini.
@media screen and (max-width: 980px) {#layout { width: 100%;}#layout .konten { margin: auto; width: 95%; background-color: #CCCCCC;}#layout .konten .header { float: left; width: 100%; height: 100px; background-color: #99CC00;}#layout .konten .menu { float: left; width: 100%; background-color: #99CCCC;}#layout .konten .body { float: left; width: 100%; background-color: #00CCFF; height: 400px;}#layout .konten .footer { padding: 1px; clear: both; width: 99%;}#layout .konten .side { background-color: #FF0000; float: left; height: 200px; width: 100%;}}Script diatas digabungkan dengan script yang sudah teman sekalian selipkan.
Letakan script diatas sebelum </style> atau dibagian paling Bawah.
Lalu test di mozilla teman-teman apakah sudah responsive atau belum dengan menggunakan cara sebelumnya.
Jangan Lupa Sebelum </head> Berikan Code Ini Agar Work Di Segala Device Ya.
<meta name="viewport" content="width=device-width">
Oke sekian dari saya.
Terima kasih atas perhatiannya.
makasih gan ilmu nya...
BalasHapus