Membuat interface responsive Sederhana dengan CSS.
A. Pendahuluan
Website jika dibuat dengan acuan pada resolusi tertentu akan hancur jika di buka pada resolusi berbeda misalnya Desktop dan mobile, maka dari itu dibutuhkan Responsive Website.
B. Latar Belakang
Untuk membuat sebuah templet website yang responsive dan sesuai dengan resolusi device yang digunakan.
C. Tujuan dan Manfaat
Agar bisa membuat templete website responsive dengan CSS.
D. Pembahasan
Responsive Website adalah sebuah website yang didesain agar halaman website bisa menyesuaikan pada resolusi device yang digunakan untuk mengakses website. Untuk membuat Website responsive harus menggunakan pertama tag <meta> untuk menyesuaikan sie HTML dengan Device yang digunakan. Dan selain itu digunakanlah CSS yang menggunakan selector @media dimana selector ini untuk mendefinisikan jika sebuah device dengan resolusi ini akan dibuat seperti ini.
1. Tag Meta untuk mendefinisikan Website sesuai resolusi device.
<meta name="viewport" content="width=device-width, initial-scale=1.0"?>
2. File HTML
<div class="container">
<div class="right">
<div class="menu">
<ul class="main">
<a href=""><li>HOME</li></a>
<a href=""><li>NGOPRAKIT</li></a>
<a href=""><li>ABOUT</li></a>
<a href=""><li>INFO</li></a>
</ul>
</div>
<div class="isi"></div>
</div>
<div class="left">
<div class="top"></div>
<div class="center"></div>
</div>
</div>
3. Script CSS.
body{
margin: 0;
}
.container{
position: absolute;
top: 20px;
left: calc((100% - 80%)/2);
width: 80%;
}
.right{
width: 65%;
height: 550px;
float: left;
margin-bottom: 10px;
}
.main{
position: relative;
list-style-type: none;
background-color: #F3F3F3;
padding: 0;
margin: 0;
}
.main li{
text-decoration:none;
display: inline-block;
padding: 15px 20px;
color: #737373;
font-family: serif;
font-size: 14px;
}
.isi{
width:100%;
top: 5px;
position: relative;
height: 500px;
background-color: #F3F3F3;
}
.left{
float: right;
margin-left: 5px;
width: 34%;
height: 550px;
}
.top{
width: 100%;
height: 150px;
background-color: #F3F3F3;
margin-bottom: 10px;
}
.center{
width: 100%;
height: 250px;
background-color: #F3F3F3;
margin-bottom: 10px;
}
@media screen and (max-width: 960px){
.right{
width: auto;
float: none;
}
.left{
width: auto;
float: none;
margin: 0;
}
}
@media screen and (max-width: 600px){
.main li{
padding: 15px 10px;
}
}
Download
Outputnya :
Mode Desktop
Mode Mobile
Dan itulah contoh sederhana templete Website responsive yang dibuat untuk memperbaiki kerusakan Website jika beda Resolusi pada akses Device.
E. Kesimpulan
Website Responsive harus dibuat untuk memperbaiki kerusakan pada Website jika resolusi berbeda beda.
F. Referensi
-
-
