[trick] Konsep Web Respon Tanpa Library

Bismillah..

pada dasarnya kita membuat web selalu ketergantungan dengan library, tapi taukah anda semua itu bisa diciptakan sendiri.

kali ini kita coba membahas salah satu tema web respon. web respon itu apa sih.?

web respon dimana web kita bisa menyesuaikan dengan segala macam device, desktop, tablet, iphone, dan mobile. konsepnya sangatlah simple, berikut sedikit contoh web respon:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.head{margin-left:250px; width:900px; height:150px; background-color:#066;}
.body{margin-left:250px; width:900px; height:300px; background-color:#ccc;}
.foot{margin-left:250px; width:900px; height:50px; background-color:#066;}

@media screen and (max-width:480px){
.head{margin-left:0px; width:400px; height:150px; background-color:#066;}
}
@media screen and (max-width:480px){
.body{margin-left:0px; width:400px; height:300px; background-color:#ccc;}
}
@media screen and (max-width:480px){
.foot{margin-left:0px; width:400px; height:50px; background-color:#066;}
}

@media screen and (max-width:800px) and (min-width:480px){
.head{margin-left:0px; width:780px; height:150px; background-color:#066;}
}

@media screen and (max-width:800px) and (min-width:480px){
.body{margin-left:0px; width:780px; height:300px; background-color:#ccc;}
}

@media screen and (max-width:800px) and (min-width:480px){
.foot{margin-left:0px; width:780px; height:50px; background-color:#066;}
}
</style>
</head>

<body>
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</body>
</html>

untuk hasil bisa liat :

1.Dekstop

desktop

2.tablet

tablet

3. Mobile

mobile

sangatlah mudah, anda bisa membuatnya tanpa library.  silahkan liat source diatas. selamat bereksperimen

 

Leave a comment

1 Comment

  1. Reblogged this on Dinesh Ram Kali..

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: