Unit Viewport

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

Dalam CSS, satuan viewport adalah satuan pengukuran relatif yang didasarkan pada ukuran viewport browser (area halaman web yang terlihat). Satuan ini memungkinkan kamu membuat desain responsif dengan mengatur ukuran elemen dan teks secara proporsional terhadap lebar atau tinggi viewport. Satuan viewport sangat berguna untuk membuat tata letak yang fleksibel, menyesuaikan ukuran teks, dan memosisikan elemen agar menyesuaikan dengan berbagai ukuran layar.

Ada empat unit viewport:

vw (lebar viewport): Mewakili 1% dari lebar viewport. Misalnya, 10vw sama dengan 10% dari lebar viewport.

vh (tinggi viewport): Mewakili 1% dari tinggi viewport. Misalnya, 25vh sama dengan 25% dari tinggi viewport.

vmin (minimum viewport): Mewakili 1% dari dimensi viewport yang lebih kecil (lebar atau tinggi). Misalnya, jika viewport lebih lebar daripada tingginya, 5vmin sama dengan 5% dari tinggi viewport.

vmax (maksimum viewport): Mewakili 1% dari dimensi viewport yang lebih besar (lebar atau tinggi). Misalnya, jika lebar viewport lebih besar daripada tingginya, 8vmax sama dengan 8% dari lebar viewport.

Berikut sintaks dasar untuk menggunakan satuan viewport:

selector {
    property: value;
}

selector: Selector CSS yang menargetkan elemen HTML yang ingin kamu beri gaya.

property: Properti CSS yang ingin kamu atur (misalnya, width, height, font-size, margin, padding).

value: Nilai yang mencakup satuan viewport (misalnya, 50vw, 75vh, 10vmin, 5vmax).

Contohnya:

.box {
    width: 50vw; /* Lebar kotak akan menjadi 50% dari lebar viewport */
    height: 30vh; /* Tinggi kotak akan menjadi 30% dari tinggi viewport */
}

Dalam contoh ini, elemen .box memiliki lebar 50vw dan tinggi 30vh, sehingga responsif terhadap lebar dan tinggi viewport.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan judul (<h1>), paragraf (<p>), dan divisi (<div>). Tugasmu adalah menggunakan unit viewport agar elemen-elemen ini responsif. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <h1>. Atur font-size-nya menjadi 6vw.
Tulis aturan CSS yang menargetkan elemen <p>. Atur font-size-nya menjadi 4vmin.
Tulis aturan CSS yang menargetkan elemen <div>. Atur width-nya menjadi 80vw dan height-nya menjadi 50vh.

Coba sendiri

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>