Membuat Web Responsive dengan CSS3

Membuat Web Responsive dengan CSS3

CSS, HTML, Tutorial - 01 Jan 2015

Saat ini resolusi perangkat elektronik sangat bervariasi, dimulai dari resolusi 320px hingga resolusi tertinggi 2560px. Pengunjung yang mengakses sebuah web pun bukan hanya menggunakan komputer saja melainkan berbagai perangkat dengan resolusinya yang beragam. Dimulai dari smartphone, tablet, netbook, notebook dan komputer desktop.

Tentu melihat target pengunjung yang sangat beragam, web responsive bisa menjadi alternatif dalam menyajikan desain sebuah web. Web resposive ialah desain web yang dapat menyesuaikan tampilannya pada berbagai perangkat dengan resolusi yang beragam. Untuk melihat contoh web responsive silahkan lihat demo dibawah.

Download
Demo

Pada tutorial berikut, kita akan membuat web responsive dengan HTML5 dan CSS3. Dengan perintah media queries pada CSS3, sebuah desain halaman web dapat dibuat dengan berbagai resolusi perangkat.

Langkah 1

Buatlah kerangka web dengan perintah HTML. Pada contoh berikut, tampilan web didesain dengan format 2 column serta terdiri dari bagian header, content, sidebar dan footer.

<!DOCTYPE html>
<html>
<head>
  <title>Web Responsive</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="container">
    <header id="header">
      Header
    </header>
   
    <div id="content">
      <article class="clearfix">  
        Konten
      </article>
    </div>

    <aside id="sidebar">
      Sidebar
   </aside>

    <footer id="footer">
      Copyright 2015 <a href="https://www.eplusgo.com">ePlusgo</a>
   </footer>
 </div>
</body>
</html>

Langkah 2

Selanjutnya berikan desain dengan CSS pada kerangka halaman web yang sudah dibuat sebelumnya.

body {
 background: #ecf0f1;
  font-family: 'Lato', sans-serif;
}

a {
  color: #026acb;
 text-decoration: none;
  outline: none;
}
a:hover {
  text-decoration: underline;
}

#container {
  width: 1000px;
  margin: 0 auto;
 background: #ffffff;
}

#header {
  position: relative;
 height: auto;
 padding: 20px 0;
  background: #3498db;
  text-align: center;
 font-size: 30px;
}

#content{
  width: 650px;
 float: left;
  padding: 10px;
}

#sidebar {
 width: 300px;
 float: right;
 padding: 10px;
}

#sidebar ul {
  padding: 0;
}

#sidebar ul li {
  list-style: none;
 border-bottom: 1px solid #efefef;
 padding: 5px 0;
}

#footer {
 clear: both;
  /*position: relative;*/
 height: auto;
 background: #34495e;
  padding: 7px 0;
 text-align: center;
 font-size: 12px;
}

Langkah 3

Terakhir, berikan perintah CSS3 media queries pada resolusi yang diinginkan. Perintah ini digunakan untuk membuat tampilan web menjadi responsive.

/* Desain pada resolusi 651px hingga maksimal 980px */
@media screen and (max-width: 980px) {
 #container {
    width: 95%;
 }

 #content {
    width: 65%;
   padding: 2%;
  }

 #sidebar {
    width: 24%;
   padding: 1%;
  }

}

/* Desain pada resolusi terendah hingga maksimal 650px */
@media screen and (max-width: 650px) {
 #header {
   height: auto;
   /*padding: 1%;*/
  }

 #content {
    width: auto;
    float: none;
    margin: 20px 0;
 }

 #sidebar {
    width: 100%;
    margin: 0;
    float: none;
  }

}

Kesimpulan

Perintah media queries pada CSS3 digunakan untuk membuat desain web dengan target resolusi tertentu. Anda bisa menambahkan desain dengan resolusi lainnya sesuai kebutuhan.

Pada contoh diatas, untuk membuat konten gambar menjadi responsive digunakan perintah :

/* Responsive Gambar */
.img-responsive {
 max-width: 100%;
  height: auto;
 width: auto\9; /* ie8 */
}

Sedangkan konten video menggunakan perintah :

/* Respnsive Video */
.video iframe, .video object, .video embed {
 position: absolute;
 top: 0;
 left: 0;
  width: 100%;
  height: 100%;
}



  • Tutorial Dasar CSS
    CSS Style
    CSS Advanced
    Referensi CSS Lainnya

  • Populer

  • Terbaru