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.

17 komentar:

  1. Sekedar mampir, mantap infonya.
    Ada yg pake media, ada juga yang pake flexbox.
    Ditunggu tutorial nya

    BalasHapus
  2. wow ini dia artikel yg sudah lama saya cari..maksih kang artikelnya sangat bermanfaat sekali..

    BalasHapus
  3. Ilmu saya masih nol tentang koding 🙈

    BalasHapus
  4. Apalagi sya yg notabene rada gaptek 😂😂😁

    BalasHapus
  5. btw sekarang blogger lagi susah upload foto..
    fyi
    sebenarnya upload foto tetap bisa masuk ke blogger tetapi tidak bisa langsung ke posting di postingan kita.
    klo mau salah satu caranya pake html tag yakni img tag.

    BalasHapus
  6. Gan, kalau masukin gambar ke postingan biar ukuran responsive gimana

    BalasHapus
  7. Entahlah tentang koding T.T tapi makasih ilmunya mas

    BalasHapus
  8. Responsif seperti ini dibutuhkan agar kecepatan web maksimal

    BalasHapus
  9. Pengen belajar banget bikin kya gini tpi ndak tau harus mulai dari mana dan harus belajar ke siapa

    BalasHapus
  10. nih dari dulu aku juga bingung tentang ini, jadi merasa terbantu saat ini, makasih bang

    BalasHapus
  11. Kalo liat coding gtu pusing, tapi bs copas dan belajar darisini. Thank ya infonya.

    BalasHapus