Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
emb.. kira-kira ada yang sudah tau?? oke lahh kalo begitu mari simak sedikit penjelasan saya tentang responsive
Pengertian Responsive
Responsive Web Design (RWD)) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun komputer meja.
Tentang Responsive
1. desain web responsif membuat halaman web Anda terlihat baik di semua perangkat.
2. desain web responsif hanya menggunakan HTML dan CSS.
3.desain web responsif bukan program atau JavaScript.
Nahh.. ini sedikit Script yang sudah saya siapkan untuk rekan sekalian
Elemen kunci fleksibilitas dalam desain responsif adalah lebar tata letak cairan.Yang perlu Anda lakukan adalah membuat pembungkus, konten, dan lebar kolom yang akan disesuaikan dengan lebar perangkat yang berbeda. Ini bukan hal baru, tapi sekarang lebih penting dari sebelumnya.
Untuk menjaga hal-hal sederhana, saya akan menunjukkan cara membuat halaman cairan yang terdiri dari navigasi, gambar fitur dan dua kolom, yang mempertimbangkan tata letak pada berbagai perangkat berukuran. Anda akan melihat bahwa saya menyertakan respons.min.js, yang merupakan polibill ringan yang memungkinkan kueri media berfungsi di IE6-8. Berikut adalah struktur HTML dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Demo | Responsive Web</title>
<meta name="viewport" content="width=device-width, minimumscale=
1.0, maximum-scale=1.0" />
<link href="styles/main.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
<div id="wrapper">
<header>
<nav id="skipTo">
<ul>
<li>
<a href="#main" title="Skip to Main Content">Skip to Main Content</a>
</li>
</ul>
</nav>
<h1>Demo</h1>
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Work">Work</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</nav>
<div id="banner">
<img src="images/kaws.jpg" alt="banner" />
</div>
</header>
<section id="main">
<h1>Main section</h1>
<p>Lorem…p>
</section>
<aside>
<h1>Sub-section</h1>
<p>Lorem …p>
</aside>
</div>
</body>
</html>
Ketika sampai pada CSS, menetapkan lebar maksimal adalah ide bagus untuk menghentikan penskalaan situs di layar besar - dan ini tidak akan menahan halaman agar tidak menyusut. Salah satu isu utama saat beralih dari lebar tetap ke cairan adalah gambar. Dan ada perbaikan sederhana untuk ini di CSS Anda. Cukup atur lebar gambar Anda menjadi 100%
float: left;
display: block;
background: url(../images/demo.gif) 0 0 no-repeat;
text-indent: -9999px;
}
/* Nav */
header nav {
float: right;
margin-top: 40px;
}
header nav li {
display: inline;
margin-left: 15px;
}
#skipTo {
display: none;
}
#skipTo li {
background: #b1fffc;
}
/* Banner */
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
}
#banner img {
width: 100%;
}
Atau kawan juga bisa enggunakan kode seperti di bawah ini selain yang diatas
*{ 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 */
}
mungkin itu kawan, silahkan mencobadan semoga berhasil...
Referensi
http://www.creativebloq.com/
http://syafaasriya.blogspot.co.id/2016/07/belajar-web-responsive.html
Tidak ada komentar:
Posting Komentar