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%
}<!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>
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%}
}<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><!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>
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!