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
Untuk membuat tata letak yang responsif, ada dua hal yang perlu kita lakukan,
- Membuat lebar dan tinggi elemen yang dinamis dengan memberikan nilai dalam bentuk persentase
- 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,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,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!👍
0 Komentar untuk " Tutorial belajar css # Membuat responsive layout"
Silahkan berkomentar dengan baik dan bijak!