Tutorial belajar css # 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 element pada ukuran layar tersebut.
Itulah yang akan kita bahas pada artikel kali ini.

Daftar Isi

Apa itu responsive layout?
Cara membuat responsive layout
Membuat elemen dengan ukuran yang dinamis
Membuat element yang fleksibel
- Membuat element fleksibel dengan properti float
- Membuat element fleksibel dengan properti flex-box
Mengatur layout dengan css rule media screen

Yuk kita mulai tutorialnya dengan pertanyaan,

Apa itu responsive layout?

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

Tutorial belajar css # membuat responsive layout

Cara membuat responsive layout

Untuk membuat tata letak yang responsif, ada tiga hal yang perlu kita perhatikan,

Mengatur dimensi element dengan nilai berupa persentase
Mengatur fleksibilitas element menggunakan properti float ataupun flex-box
Menggunakan rule media screen untuk mengatur posisi element pada berbagai ukuran layar

Yuk kita langsung praktikan biar lebih paham.

Membuat elemen dengan ukuran yang dinamis

Sebagai contoh disini kita akan mencoba membuat elemen <img> memiliki lebar yang dapat menyesuaikan ukuran layar.

Buat selector tag image dengan properti width dan max-width seperti berikut,
```
img {
   width:550px;
   max-width:100%
}
```

Kemudian kita buat element imagenya pada dokument htmlnya, sehingga kodenya lengkapnya 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>

Jika kita buka di web browser maka hasilnya akan seperti berikut,

Ko bisa gitu?

Yap, itu karena pada css kita mengatur properti width dari element <img> dengan nilai 550px kemudian kita atur max-width (batas maksimal width) dengan nilai 100% sehingga ketika ukuran lebar layar kurang dari 550px, element image akan memiliki width 100% atau sama dengan lebar parent element yaitu element <body>, dimana element <body> memiliki width sama dengan ukuran layar.

Kita tidak perlu mengatur semua element dengan properti width, misalnya elemen div memiliki width 100% karean memiliki display:block secara default.

Membuat element yang fleksibel

Untuk membuat element yang fleksibel kita bisa memanfaatkan properti float atau properti flex-box,

Membuat element fleksibel dengan properti float

Properti float memungkinkan kita untuk mensejajarkan element blocking seperti div kearah left (kiri) atau right (kanan). Ketika element tersebut melebihi element parentnya secara horizontal maka otomatis akan di wraping.

advertisement
Contoh implementasinya seperti berikut,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .baris{
        box-sizing: border-box;
      }
      .kolom{
        width: 333px;
        height: 120px;
        background-color: aquamarine;
        margin: 3px;
        box-sizing: border-box;
      }
      .kolom1,.kolom2, .kolom3{
        float: left;
      }
      .kolom4{
        clear: left;
        width:100%
      }
    </style>
</head>
<body>
  <section class="baris">
	   <div class="kolom kolom1">Kolom 1</div>
	   <div class="kolom kolom2">Kolom 2</div>
	   <div class="kolom kolom3">Kolom 3</div>
	   <div class="kolom kolom4">Kolom 4 (float di clear)</div>
  </section>
</body>
</html>

Note : jika menggunakan properti float maka harus di ikuti dengan properti clear untuk mereset perilaku dari element float pada element yang non fleksibel. Seperti pada contoh di atas kita menerapkan properti clear pada element div dengan class kolom4.

Jika kita buka di browser maka hasilnya seperti berikut,

Tutorial belajar css # membuat responsive layout

Membuat element fleksibel dengan properti flex-box

Flex-box memanfaatkan properti display yang di set menjadi flex.

[element pembungkus]{ display:flex; }

Element children yang ada di dalam element flex-box akan menjadi element item dari element flex-box itu sendiri.
Kelebihan flex-box dibanding float adalah kita tidak diharuskan untuk menggunakan properti clear untuk meresetnya serta kita bisa mengatur arah dari item-itemnya (column, row, column-reverse, row-reverse ).
Untuk membuat layout responsif yang kompleks lebih disarankan menggunakan flex-box dibanding menggunakan float.
Sebelum masuk ke implementasi flex-box kita perlu mengetahui properti-properti yang digunakan untuk membangun flex-box.
Properti-properti flex-box dibagi menjadi 2 yaitu,

Properti container

Properti container adalah properti yang digunakan pada element pembungkusnya,

Properti	Keterangan	Nilai
Display	Digunakan untuk menset element ke mode flex-box	flex
flex-direction	Digunakan untuk menentukan arah dari item-item flex-box	row \| row-reverse \| column \| column-reverse \| initial \| inherit
align-items	Digunakan untuk mensejajarkan item-item secara vertical jika flex-directionnya row dan mensejajarkan item secara horizontal jika flex-directionnya column	stretch \| center \| flex-start \| flex-end \| space-between \| space-around \| initial \| inherit
justify-content	Digunakan untuk mensejajarkan item-item secara vertical jika flex-directionya column dan mensejajarkan item secara horizontal jika flex-directionnya row	flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly \| initial \| inherit
flex-wrap	Digunakan untuk menentukan apakah item dapat di wrap atau tidak	nowrap \| wrap \| wrap-reverse \| initial \| inherit
align-content	Digunakan untuk mengubah perilaku dari properti flex-wrap. Ini mirip dengan menyelaraskan item, tetapi bukannya menyelaraskan item fleksibel, ini menyelaraskan garis fleksibelnya	stretch \| center \| flex-start \| flex-end \| space-between \| space-around \| initial \| inherit
flex-flow	Digunakan untuk mengatur flex-direction dan flex-wrap secara singkat	flex-direction flex-wrap \| initial \| inherit

Properti items

Properti items adalah properti yang digunakan pada element itemnya yang ada di dalam element container,

Properti	Keterangan	Nilai
align-self	Digunakan untuk meluruskan element item itu sendiri	stretch \| center \| flex-start \| flex-end \| space-between \| space-around \| initial \| inherit
flex	Digunakan untuk menset flex item secara singkat	flex-grow flex-shrink flex-basis \| auto \| initial \| inherit
flex-basis	Digunakan untuk menentukan panjang item flex-box	number \| auto \| initial \| inherit
flex-grow	Digunakan untuk menentukan seberapa banyak item akan berkembang relatif terhadap item fleksibel yang lain	number \| initial \| inherit
flex-shrink	Digunakan untuk menentukan seberapa banyak item akan menyusut relatif terhadap item fleksibel yang lainnya	number \| initial \| inherit
order	Digunakan untuk mengatur urutan dari item flex-box	number \| initial \| inherit

Contoh implementasi dari flex-box seperti berikut,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .flex-container{
        display: flex; /* mengubah ke mode flexbox */
        flex-wrap: wrap; /* mengatur item flexbox dapat diwrap */ 
        flex-direction: row; /* Mengatur arah item ke row */
        justify-content: center; /* mensejajarkan item selalu di tengah dalam satu baris */
      }
      .item{
        width: 333px;
        height: 120px;
        background-color: aquamarine;
        margin: 3px;
        box-sizing: border-box;
        flex-grow:1; /* mengatur setiap item flexbox dapat melebar 1 bagian dari total item*/
        flex-shrink: 1; /* mengatur setiap item flexbox dapat menciut 1 bagian dari total item*/
      }
      .item4{
        order:-1 /* secara default setiap item flexbox memiliki value order 0, sehingga kita menset item4 ke -1 agar menjadi item pertama*/
      }
    </style>
</head>
<body>
  <h1>Derertcode</h1>
  <section class="flex-container">
	   <div class="item item1">Item 1</div>
	   <div class="item item2">Item 2</div>
	   <div class="item item3">Item 3</div>
	   <div class="item item4">Item 4</div>
  </section>
</body>
</html>

Jika kita buka di browser maka hasilnya seperti berikut,

Tutorial belajar css # membuat responsive layout

Mengatur layout dengan css rule media screen

Tahapan yang ketiga adalah mengimplementasikan css rule yaitu media untuk menentukan styling yang harus diimplementasikan berdasarkan ukuran layar perangkat yang digunakan untuk membuka halaman web.

@media (width: [ukuran pixel]) { ... }
@media (min-width: [ukuran pixel]) { ... }
@media (max-width: [ukuran pixel]) { ... }

Note : Ketika kita hendak membuat sebuah halaman web yang responsif disarankan kita membuat stylingnya dari tampilan mobile terlebih dahulu kemudian tablet dan terakhir dekstop. Ini dikarenakan mengatur tampilan dari layar yang kecil ke layar yang lebar lebih mudah dari pada sebaliknya. Selain itu saat ini lebih banyak orang yang mengakses halaman menggunakan mobile phone dibandingkan dekstop sehingga sebuah web harus dipastikan benar-benar terlihat rapi ketika di buka di prangkat mobile.

Berikut implementasi rule media screen yang tepat,

  /* Default styling (ukuran layar paling kecil) */
p{ font-size: 10pt; }
...
...
...

  /* Ukuran layar mobile phone minimal resolusi 576px */
@media (min-width: 576px) { p{ font-size: 11pt; } }
  /* Ukuran layar tablet minimal resolusi 768px */
@media (min-width: 768px) { p{ font-size: 12pt; } }
  /* Ukuran layar dekstop minimal resolusi 992px */
@media (min-width: 992px) { p{ font-size: 14pt; } }
  /* Ukuran layar besar minimal resolusi 1200px */
@media (min-width: 1200px) { p{ font-size: 17pt; } }
  /* Ukuran layar sangat besar minimal resolusi 1400px */
@media (min-width: 1400px) { p{ font-size: 20pt; } }

Note: Styling rule media screen wajib di taruh di paling bawah setelah styling default.

Baik sekarang kita coba coba membuat sebuah layout yang responsif dengan menggunakan rule media screen dan element fleksibel menggunakan properti float.
Kenapa menggunakan properti float bukan flex-box?
Karena jika kita menggunakan flex-box kita tidak perlu lagi menggunakan rule media screen karena flex-box memiliki properti flex-grow dan flex-shrink.

Berikut contoh implementasinya,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
  /* Ukuran layar kecil */
      .baris{
        box-sizing: border-box;
      }
      .kolom{
        width: 100%;
        height: 120px;
        background-color: aquamarine;
        margin: 3px;
        box-sizing: border-box;
        float: left;
        padding: 9px;
      }
      h2{font-size: 10pt;}
      p{font-size: 9pt}

      /* Ukuran layar mobile phone minimal resolusi 576px */
      @media (min-width: 576px) { 
        .kolom{width: calc(50% - 6px);}
        h2{font-size: 11pt;}
        p{font-size: 10pt}
      }

        /* Ukuran layar tablet minimal resolusi 768px */
      @media (min-width: 768px) { 
        .kolom{width: calc(100vw / 3 - 12px);}
        h2{font-size: 13pt;}
        p{font-size: 12pt}
      }

        /* Ukuran layar dekstop minimal resolusi 992px */
      @media (min-width: 992px) { 
        .kolom{width: calc(100vw / 4 - 18px);}
        h2{font-size: 14pt;}
        p{font-size: 12pt}
      }

        /* Ukuran layar besar minimal resolusi 1200px */
      @media (min-width: 1200px) { 
        .kolom{width: calc(100vw / 5 - 24px);}
        h2{font-size: 19pt;}
        p{font-size: 16pt}
      }

        /* Ukuran layar sangat besar minimal resolusi 1400px */
      @media (min-width: 1400px) {
        h2{font-size: 20pt;}
        p{font-size: 18pt}
      }
    </style>
</head>
<body>
  <h1>Derertcode</h1>
  <section class="baris">
	   <div class="kolom"><h2>Judul</h2><p>Paragraf</p></div>
	   <div class="kolom"><h2>Judul</h2><p>Paragraf</p></div>
	   <div class="kolom"><h2>Judul</h2><p>Paragraf</p></div>
	   <div class="kolom"><h2>Judul</h2><p>Paragraf</p></div>
  </section>
</body>
</html>

Jika kita buka di browser maka hasilnya seperti berikut,

Tutorial belajar css # membuat responsive layout

Itu dia tutorial dasar membuat responsive layout.
Kalian bisa berkreasi sendiri dengan mengubah tataletak element sesuai keinginan.

Sampai disini tutorial membuat responsif 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!