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 style berdasarkan lebar, tinggi, atau properti perangkat lainnya.

Sintaks Dasar untuk Media Queries:

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

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

property: Property CSS yang akan diatur (misalnya, width, font-size).
nilai: Nilai yang ditetapkan ke property, 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 style untuk layar dengan tinggi maksimum (misalnya, max-height: 400px).
min-height: Menerapkan style 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 lightblue saat lebar layar 600px atau lebih kecil. Untuk layar dengan lebar antara 601px dan 1024px, warna latar belakang akan menjadi lightgreen.

Tantangan

Mudah

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

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

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

Coba sendiri

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--Tulis kodemu di sini-->
        
    </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>