Belajar Web Responsive

Belajar Web Responsive

Hallo...
Semangat Pagi !

Di kesempatan ini, saya akan posting tentang web responsive, tentang web responsive saya pun sedang belajar, dan kurang faham. Namun saya akan share sedikit yang saya tahu tentang web responsive.

Sebelumnya kita buat dahulu kerangkanya dengan html, berbentuk seperti ini

Nah untuk css nya, saya sudah menyiapkan

---

*{ margin:0;padding:0; }
body{font-size:12px;font-family:verdana;}
#wrapper { 
 margin:auto; background: #fff; padding: 10px 0;width:1000px;
}
#header{
 width:100%;background:#EEE;
}
#content{
 float:left;background:#FFF;padding:10px;height:300px;width:600px;
}
#rightside{
 float:left;background:#ccc;padding:10px;height:300px;width:360px
}
#footer{
 clear:both;
 width:980px;
 background:#5F6354;
 color:#FFF;
 padding:10px
} 

---

setelah membuat css, kita membuat resolusinya. Yang membuat web dapat beresolusi di tablet ataupun android.

berikut kodenya menggunakan @medi screen

---

@media screen and (max-width: 768px)  {
 #rightside { width: 98%;border-top:1px solid #2D2E2C; float:none; }
 #content { width:98%; float:none; }
 #wrapper{ width:98%; }
 #footer{ width:98%; }
}
img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}