Viewport Birimleri

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 64 / 76.

CSS'de görünüm alanı birimleri, tarayıcının görünüm alanının (web sayfasının görünür bölümü) boyutuna dayalı göreli ölçü birimleridir. Öğeleri ve metni görünüm alanının genişliğiyle veya yüksekliğiyle orantılı olarak boyutlandırarak duyarlı tasarımlar oluşturmanın bir yolunu sunarlar. Görünüm alanı birimleri, akışkan düzenler oluşturmak, metni ölçeklendirmek ve öğeleri farklı ekran boyutlarına uyum sağlayacak şekilde konumlandırmak için özellikle kullanışlıdır.

Dört görünüm alanı birimi vardır:

vw (görüntü alanı genişliği): Görüntü alanının genişliğinin %1'ini ifade eder. Örneğin, 10vw görüntü alanı genişliğinin %10'una eşittir.

vh (görüntü alanı yüksekliği): Görüntü alanının yüksekliğinin %1'ini temsil eder. Örneğin, 25vh görüntü alanı yüksekliğinin %25'ine eşittir.

vmin (görüntü alanının küçüğü): Görüntü alanının daha küçük boyutunun (genişlik veya yükseklik) %1’ini ifade eder. Örneğin, görüntü alanı yüksekliğinden daha genişse 5vmin, görüntü alanı yüksekliğinin %5’ine eşittir.

vmax (görünüm alanının maksimumu): Görünüm alanının daha büyük boyutunun (genişlik veya yükseklik) %1'ini temsil eder. Örneğin, görünüm alanı yüksekliğinden daha genişse 8vmax, görünüm alanı genişliğinin %8'ine eşittir.

Görünüm alanı birimlerini kullanmanın temel söz dizimi şöyledir:

selector {
    property: value;
}

selector: Biçimlendirmek istediğin HTML öğelerini hedefleyen CSS seçicisi.

property: Ayarlamak istediğin CSS özelliği (ör. width, height, font-size, margin, padding).

value: Görüntü alanı birimlerini içeren bir değer (ör. 50vw, 75vh, 10vmin, 5vmax).

Örneğin:

.box {
    width: 50vw; /* Kutunun genişliği, görüntü alanının genişliğinin 50%’si olacak */
    height: 30vh; /* Kutunun yüksekliği, görüntü alanının yüksekliğinin 30%’u olacak */
}

Bu örnekte, .box öğesinin genişliği 50vw, yüksekliği ise 30vh olduğundan, görünüm alanının hem genişliğine hem de yüksekliğine duyarlıdır.

Görev

Kolay

Sana bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) içeren bir HTML belgesi verildi. Görevin, bu öğeleri duyarlı hâle getirmek için görüntü alanı birimlerini kullanmak. Aşağıdaki adımları izle:

<h1> öğesini hedefleyen bir CSS kuralı yaz. font-size değerini 6vw olarak ayarla.
<p> öğesini hedefleyen bir CSS kuralı yaz. font-size değerini 4vmin olarak ayarla.
<div> öğesini hedefleyen bir CSS kuralı yaz. width değerini 80vw, height değerini ise 50vh olarak ayarla.

Kendin dene

<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>