Viewport Birimleri

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

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

Dört viewport birimi vardı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 (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ı minimumu): Görüntü alanının daha küçük boyutunun (genişlik veya yükseklik) %1'ini temsil 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üntü alanı maksimumu): Görüntü alanının daha büyük boyutunun (genişlik veya yükseklik) %1'ini temsil eder. Örneğin, görüntü alanı yüksekliğinden daha genişse 8vmax, görüntü alanı genişliğinin %8'ine eşittir.

Viewport birimlerini kullanmanın 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 öğesinin 50vw genişliği ve 30vh yüksekliği vardır; bu da onu görünüm alanının hem genişliğine hem de yüksekliğine duyarlı hâle getirir.

Görev

Kolay

Size bir HTML belgesi veriliyor; bu belgede bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) bulunuyor. Göreviniz, bu öğeleri duyarlı hâle getirmek için görünüm alanı 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.

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>