Jumat, 28 Mei 2021

Cara Membuat Responsive Website

Responsive Website adalah website yang bisa beradapatasi dengan semua perangkat dengan berbagai macam luas screen. Sebelumnya saya harap pembaca sudah mengenal html dan css, karena kita akan membuat responsive website ini dengan HTML dan CSS.

»Menggunakan viewport pada HTML

Penggunaan viewport untuk melihat luas dari halaman website. Karena terkadang dalam suatu website memiliki luas yang tetap dan tidak muat pada layar yang kecil. Layar yang kecil ini dimaksud layar pada tablet atau handphone yang mengunjungi website.

tampilan dekstop

tampilan handphone

Alangkah lebih indah dan bagus bila menyesuaikan tampilan pada tiap layar baik layar pada handphone, tablet maupun yang lebih besar dari itu.

viewport dipasang pada tag header dalam suatu tag meta. sebagai contoh yakni

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ini akan menyatakan lebar sebuah layar perangkat.

»Menggunakan @media pada CSS

Media query ini memberi kemampuan browser untuk menggunakan css yang berbeda pada tiap lebar layar atau perangkat dan spesifikasinya agar menggunakan gaya yang sesuai.Contoh penggunaan @media yakni:

@media screen and (min-width: 800px) and (max-width: 1024px) {
   body {
     background-color: green;
 }
}

pada kode css diatas menjelaskan tentang minimal lebar layar 800 piksel dan maksimal lebar layar 1024 piksel menggunakan warna background hijau.

Saya akan memberikan sebuah landing page yang menggunakan responsive desain ini.Kamu tinggal menyalin dan menempelnya pada suatu file baru dan menyimpanya dalam nama file responsive.html.


<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ini contoh halaman responsive</title>
  <style>
   header {
    color: #FFFFFF;
    background-color: #284b63;
    padding: 80px 0;
    text-align: right;
    width: 100%;
   }
   section {
    padding: 40px 0;
    text-align: center;
   }
.main {
    background: #FFFFFF;
    color: #000000;
    width: 75%;
    float: left;
   }
   .navigasi {
    background: #549da0;
    color: #FFFFFF;
    width: 25%;
    float: right;
   }
   footer {
    background: #353535;
    padding: 32px 0;
    text-align: center;
    color: #868686;
   }
@media screen and (max-width:600px){
    .main {
     width:100%;
     float:none;
    }
    .navigasi {
     width:100%;
     float:none;
    }
   }
</style>
 </head>
 <body>

  <header>
   Header
</header>

  <section class="main">
   Main
  </section>

  <section class="navigasi">
   Navigasi
  </section>

  <footer>
    footer
  </footer>
 </body>
</html>

Kode diatas akan berubah sesuai tampilan layar. Bila pengunjung menggunakan laptop atau komputer maka navigasi akan sejajar posisinya dengan main, bila dengan handphone maka navigasi akan ad adi bawah main.Untuk mendesain tampilan layar handphone atau biasanya tidak lebih dari 600piksel kita bisa menyetingya pada blok media kueri yang ada di bagian @media. Mudah bukan?Sekarang tampilan apapun pada perangkat apapun bisa kita perindah sesuai dengan ukuran layar perangkat yang mengunjungi website kita.