Kursus IT Dasar CSS 033_Tata Letak Responsif

Tata Letak Responsif

Tata letak responsif adalah metode desain web yang dapat beradaptasi dengan berbagai ukuran layar dan perangkat. Dengan menggunakan tata letak responsif, halaman web dapat mempertahankan efek tampilan yang baik pada berbagai perangkat, baik di komputer desktop, tablet, maupun ponsel.

Media Queries

Menggunakan media queries CSS dapat menerapkan gaya yang berbeda berdasarkan karakteristik perangkat (seperti lebar layar, tinggi, jenis perangkat, dll.). Ini memungkinkan Anda untuk mendefinisikan tata letak yang berbeda untuk ukuran layar yang berbeda.

Contoh:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* Tablet */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* Ponsel biasa */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* Perangkat layar kecil */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

Efek:

Gambar Responsif

Gunakan max-width: 100%; untuk memastikan gambar dan elemen media tidak melebihi wadahnya pada layar kecil. Contoh:

1
    img {
2
      max-width: 100%; /* Lebar maksimum gambar adalah 100% dari elemen penampung */
3
      height: auto;    /* Pertahankan rasio aspek, hindari distorsi gambar */
4
    }
5

6
    /* Sesuaikan ukuran gambar pada layar kecil */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* Lebar maksimum gambar adalah 50% dari elemen penampung */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

Efek:

Pengaturan Viewport

Gunakan tag <meta> untuk mengatur viewport guna memastikan halaman diskalakan dengan benar pada perangkat mobile.

Contoh:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tag meta ini memberitahu browser mobile bahwa mereka harus mengatur lebar viewport ke lebar perangkat dan memperbesar dokumen ke 100% dari ukuran yang diharapkan, menampilkan dokumen dalam ukuran yang dioptimalkan untuk mobile yang Anda inginkan.

Bersama dengan tag meta viewport, Anda dapat menggunakan beberapa pengaturan lainnya, tetapi secara umum, baris di atas adalah yang ingin Anda gunakan.

• initial-scale: Mengatur zoom awal halaman, kami mengaturnya ke 1.
• height: Mengatur tinggi tertentu untuk viewport.
• minimum-scale: Mengatur tingkat zoom minimum.
• maximum-scale: Mengatur tingkat zoom maksimum.
• user-scalable: Mencegah zoom jika diatur ke no.

Hindari menggunakan minimum-scale, maximum-scale, terutama user-scalable diatur ke no, untuk memastikan pengguna dapat memperkecil dan memperbesar sendiri.