Unit Viewport

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

Dalam CSS, unit viewport adalah unit pengukuran relatif yang didasarkan pada ukuran viewport browser (area halaman web yang terlihat). Unit ini memungkinkan kamu membuat desain responsif dengan mengatur ukuran elemen dan teks secara proporsional terhadap lebar atau tinggi viewport. Unit viewport sangat berguna untuk membuat tata letak yang fleksibel, menyesuaikan ukuran teks, dan memosisikan elemen agar beradaptasi 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. Contohnya, 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 viewport lebih lebar daripada tingginya, 8vmax sama dengan 8% dari lebar viewport.

Berikut sintaks dasar untuk menggunakan unit viewport:

selector {
    property: value;
}

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

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

value: Nilai yang mencakup unit 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 ukurannya responsif terhadap lebar dan tinggi viewport.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan heading (<h1>), paragraf (<p>), dan division (<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>