DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Membuat responsive layout

advertisement
Membuat responsive layout

Hal yang perlu diperhatikan saat membangun website adalah memastikan tata letak halaman web dapat menyesuaikan di berbagai ukuran layar.
Hal ini penting agar web kita tetap terlihat rapi ketika di buka di perangkat dengan ukuran layar kecil maupun besar.
Untuk menangani hal tersebut, kita tidak perlu membuat banyak halaman web berdasarkan ukuran layar, tapi cukup memanfaatkan kemampuan css dalam mengidentifikasi ukuran layar kemudian kita bisa memberikan style yang tepat untuk setiap elemen pada ukuran layar tersebut.
Yuk kita mulai tutorialnya

Apa itu responsive layout?

Responsive layout atau tata letak yang resonsif adalah sebuah teknik dimana setiap elemen memiliki letak yang fleksibel dan ukuran yang dinamis menyesuaikan ukuran layar perangkat yang digunakan untuk menampilkan halaman website.
Membuat responsive layout

Membuat responsive layout

Untuk membuat tata letak yang responsif, ada dua hal yang perlu kita lakukan,
  1. Membuat lebar dan tinggi elemen yang dinamis dengan memberikan nilai dalam bentuk persentase
  2. Membuat rule media untuk mengatur posisi elemen sesuai ukuran layar perangkat yang digunakan untuk membuka halaman web.
Yuk kita langsung praktikan biar lebih paham.

Membuat elemen dengan ukuran yang dinamis

Disini kita akan mencoba membuat elemen <img> memiliki lebar dan tinggi yang dapat menyesuaikan ukuran layar.
1. Buat selector tag image dengan properti width dan max-width  seperti berikut,
img {
   width:550px;
   max-width:100%
}
2. Kemudian kita buat elemen imagenya, sehingga kodenya akhir seperti berikut,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         img{
           width:550px;
           max-width:100%
         }
      </style>
   </head>
   <body>
      <img src="car.png"/>
   </body>
</html>
3. Jika kita buka di web browser maka hasilnya akan seperti berikut,
Membuat responsive layout
Ko bisa gitu?
Yap, itu karena pada css kita mengatur properti width dari elemen <img> dengan nilai 550px kemudian kita atur max-width (batas maksimal width) dengan nilai 100% sehingga ketika ukuran lebar layar kurang dari 550px elemen image akan memiliki width 100% atau sama dengan lebar parent elemen yaitu elemen <body>, dimana elemen <body> memiliki width sama dengan ukuran layar.
Kita tidak perlu mengatur semua elemen dengan properti  width, misalnya elemen div memiliki width 100% dengan properti display:block secara default.

Membuat layout elemen yang dinamis

Untuk lebih memahami tentang dinamis layout, disini kita akan mencoba membuat grid layout sederhana.
1. Buat css dengan rule dan properti seperti berikut,
.row{
   display:flex;flex-wrap:wrap; padding:9px
}
.grid
{
   border:1px solid yellow;  
   height:550px;
   border-radius:9px;
   background-color:#eaeaea;
   margin:9px;
   width:calc(25% - 18px);
   height:250px;
}
@media screen and (max-width: 600px) {
   .grid{width:100%}
}
2. Kemudian kita buat elemen elemennya, kodenya seperti berikut,
<div class="row">
   <div class="grid">
      <p align="center">Konten 1</p>
   </div>
   <div class="grid">
<p align="center">Konten 2</p> </div> <div class="grid">
<p align="center">Konten 3</p> </div> <div class="grid">
<p align="center">Konten 4</p> </div> </div>
3. Sehingga kode akhir htmlnya seperti berikut,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         /* Membuat elemen row sebagai pembungkus elemen yang akan kita buat grid */
         .row{
           display:flex;flex-wrap:wrap; padding:9px; /* Mengatur display dengan mode flex dan wrap */
         }
         .grid
         {
           border:1px solid yelow;  
           height:550px;
           border-radius:9px;
           background-color:#eaeaea;
           margin:9px;
           width:calc(25% - 18px); /* kita akan membuat grid layout dengan 4 kolom sehingga valuenya 25%. Dikurang 18px karena kita mengatur margin dengan nilai 9px sisi kiri dan 9 px sisi kanan*/
           height:250px;
         }
         /* Ketika ukuran layar kurang dari 600 px elemen grid akan diubah width nya menjadi 100% */
         @media screen and (max-width: 600px) {
           .grid{width:100%}
} </style> </head> <body> <div class="row"> <div class="grid">
<p align="center">Konten 1</p> </div> <div class="grid">
<p align="center">Konten 2</p> </div> <div class="grid">
<p align="center">Konten 3</p> </div> <div class="grid">
<p align="center">Konten 4</p> </div> </div> <div class="row"> <div class="grid">
<p align="center">Konten 5</p> </div> <div class="grid">
<p align="center">Konten 6</p> </div> <div class="grid">
<p align="center">Konten 7</p> </div> <div class="grid">
<p align="center">Konten 8</p> </div> </div> </body> </html>
4. Jika kita buka di web browser, maka hasilnya seperti berikut,
Membuat responsive layout

Penjelasan: Ketika ukuran layar lebih dari sama dengan 600px, maka setiap elemin grid memiliki nilai width 1/4 ukuran layar(25%). Dan ketika ukuran layar kurang dari 600px maka rule @media screen akan merubah width dari setiap elemen grid menjadi 100%. 


Itu dia tutorial konsep dasar membuat membuat responsive layout. Kalian bisa berkreasi sendiri dengan mengubah tataletak elemen sesuai keinginan kalian.
Sampai disini tutorial membuat responsive layout menggunakan css.
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.
Jangan lupa klik tombol share jika kalian merasa tutorial ini bermanfaat.
Good luck!👍
advertisement



0 Komentar untuk " Tutorial belajar css # Membuat responsive layout"

Silahkan berkomentar dengan baik dan bijak!