Guys kali ini saya akan membagi ilmu, saya akan memposting cara untuk membuat web responsive.
Pengertian
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.
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.
Nah untuk HTML nya saya akan membagikan
Ketika sampai pada CSS, menetapkan lebar maksimal adalah ide yang 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%.
setelah membuat css, kita membuat resolusinya. Yang membuat web dapat beresolusi di tablet ataupun android.
berikut kodenya menggunakan @medi screen
Hasil yang didapatkan
REFRENSI
http://syafaasriya.blogspot.com/
Sekian postinga kali ini semoga bermanfaat.
Pengertian
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.
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.
Nah untuk HTML nya saya akan membagikan
<!DOCTYPE html>
<html>
<head>
<title>Responsive</title>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
<div class="rightside">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
<html>
<head>
<title>Responsive</title>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
<div class="rightside">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Ketika sampai pada CSS, menetapkan lebar maksimal adalah ide yang 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%.
*{ margin:0;padding:0; }
body{font-size:12px;font-family:verdana;}
.wrapper {
margin:auto; background: #fff; padding: 10px 0;width:1000px;
}
.header{
width:100%;
height: 80px;
background:blue;
}
.content{
float:left;
background:#ddd;
padding:10px;
height:300px;
width:600px;
}
.rightside{
float:left;background:green;padding:10px;height:300px;width:360px
}
.footer{
clear:both;
width:980px;
background:#5F6354;
color:#FFF;
padding:10px
}
body{font-size:12px;font-family:verdana;}
.wrapper {
margin:auto; background: #fff; padding: 10px 0;width:1000px;
}
.header{
width:100%;
height: 80px;
background:blue;
}
.content{
float:left;
background:#ddd;
padding:10px;
height:300px;
width:600px;
}
.rightside{
float:left;background:green;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 */
}
.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 */
}
Hasil yang didapatkan
REFRENSI
http://syafaasriya.blogspot.com/
Sekian postinga kali ini semoga bermanfaat.
Belajar Web Responsive
Reviewed by Ainul_Arifin29
on
August 15, 2017
Rating:
Reviewed by Ainul_Arifin29
on
August 15, 2017
Rating:
No comments: