Viewport Birimleri

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 64 / 76.

CSS'de viewport birimleri, tarayıcının viewport'unun (web sayfasının görünür alanı) boyutuna dayanan göreceli ölçü birimleridir. Öğeleri ve metni viewport'un genişliğine veya yüksekliğine orantılı olarak boyutlandırarak duyarlı tasarımlar oluşturmanın bir yolunu sağlarlar. Viewport 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 yararlıdır.

Dört viewport birimi bulunmaktadır:

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

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

vmin (görünüm alanı minimumu): Görünüm alanının (genişlik veya yükseklik) küçük olan boyutunun %1'ini temsil eder. Örneğin, görünüm alanı boyundan daha genişse, 5vmin görünüm alanı yüksekliğinin %5'ine eşittir.

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

Görünüm alanı (viewport) birimlerini kullanmak için temel sözdizimi şöyledir:

selector {
    property: value;
}

selector: Stil vermek istediğiniz HTML öğesini (öğelerini) hedefleyen CSS seçicisi.

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

value: Görünüm alanı birimleri (örneğin, 50vw, 75vh, 10vmin, 5vmax) içeren bir değer.

Örneğin:

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

Bu örnekte, .box öğesi 50vw genişliğine ve 30vh yüksekliğine sahiptir; bu da onu görünüm alanının (viewport) hem genişliğine hem de yüksekliğine duyarlı hale getirir.

Görev

Kolay

Bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğeleri duyarlı (responsive) hale getirmek için viewport birimlerini kullanmaktır. Aşağıdaki adımları izleyin:

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

Kopya kağıdı

Viewport birimleri, tarayıcının viewport (görünüm alanı) boyutuna dayalı göreceli birimlerdir ve duyarlı (responsive) tasarımlar oluşturmak için kullanışlıdır.

Dört viewport birimi:

vw (viewport width): Viewport genişliğinin %1'i
vh (viewport height): Viewport yüksekliğinin %1'i
vmin (viewport minimum): Daha küçük olan viewport boyutunun %1'i
vmax (viewport maximum): Daha büyük olan viewport boyutunun %1'i

Temel sözdizimi:

selector {
    property: value;
}

Örnek:

.box {
    width: 50vw; /* Viewport genişliğinin %50'si */
    height: 30vh; /* Viewport yüksekliğinin %30'u */
}

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>