Dasar-Dasar Media Queries

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 65 dari 76.

media query dalam CSS memungkinkan situs web menyesuaikan diri dengan berbagai ukuran layar dengan menerapkan gaya berdasarkan lebar, tinggi, atau properti perangkat lainnya.

Sintaks Dasar untuk Media Queries:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condition: Aturan yang memicu gaya (misalnya, max-width: 600px).
selector: Elemen HTML yang akan diberi gaya.

property: Properti CSS yang akan ditetapkan (misalnya, width, font-size).
value: Nilai yang ditetapkan ke properti, yang berubah berdasarkan kondisi media query.

Dalam media query, kondisi dapat didasarkan pada berbagai faktor seperti ukuran layar, resolusi, dan lainnya. Beberapa kondisi umum meliputi:

max-width: Membatasi gaya untuk layar dengan lebar maksimum (misalnya, max-width: 600px).
min-width: Menerapkan gaya untuk layar dengan lebar minimum (misalnya, min-width: 768px).

max-height: Membatasi gaya pada layar dengan tinggi maksimum (misalnya, max-height: 400px).
min-height: Menerapkan gaya pada layar dengan tinggi minimum (misalnya, min-height: 500px).

Kondisi ini membantumu mengatur tampilan situs webmu di berbagai perangkat dan orientasi.

Contoh:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

Ini mengubah warna latar belakang menjadi biru muda saat lebar layar 600px atau kurang. Untuk layar dengan lebar antara 601px dan 1024px, warna latar belakangnya akan menjadi hijau muda.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan judul (<h1>), paragraf (<p>), dan <div>. Tugasmu adalah menambahkan kueri media agar halaman menjadi responsif. Ikuti langkah-langkah berikut:

Tambahkan kueri @media untuk layar dengan lebar maksimum 600px:
- Atur warna latar belakang body menjadi biru muda.
- Atur ukuran font judul (<h1>) menjadi 5vw (5% dari lebar viewport).
Tambahkan kueri @media untuk layar dengan lebar minimum 601px dan lebar maksimum 1024px:
- Atur warna latar belakang body menjadi hijau muda.
- Atur ukuran font judul (<h1>) menjadi 3vw (3% dari lebar viewport).

Ubah ukuran jendela browser untuk melihat bagaimana kueri media menyesuaikan tata letak secara dinamis.

Coba sendiri

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    /* Write your code here */
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>