CSS Academy · Ders

Görünüm Alanı Birimleri: vw, vh, dvh

Öğeleri vw, vh ve modern dvh birimlerini kullanarak tarayıcının görünüm alanına göre boyutlandırın.

3. ders / 413 adım

Görünüm Alanı Birimleri: vw, vh, dvh, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Görünüm Alanı Birimleri Nelerdir?

Görünüm alanı birimleri, tarayıcı görünüm alanının boyutuna (tarayıcı penceresinin görünen bölümüne) göre belirlenir. Kullanılabilir ekran alanına göre ölçeklenen düzenler ve tipografi oluşturmanızı sağlar.

vw — Görünüm Alanı Genişliği

1vw = görünüm alanı genişliğinin %1'i. 100vw, görünüm alanının tamamını doldurur. Yüzde kullanımının yol açtığı karmaşıklıklar olmadan tam genişlikte öğeler oluşturmak için kullanışlıdır.

<div class="hero"></div>

vh — Görünüm Alanı Yüksekliği

1vh = görünüm alanı yüksekliğinin %1'i. 100vh, görünüm alanının tamamını doldurur. Tam ekran kahraman bölümleri ve modallar için klasik bir seçimdir.

<div class="fullscreen">100vh fills the viewport height</div>

Mobildeki 100vh Sorunu

Mobil tarayıcılarda, tarayıcı arayüzü (adres çubuğu) kaydırma sırasında gösterilip gizlendikçe görünüm alanının yüksekliği değişir. 100vh, tarayıcı arayüzünü tutarlı olmayan biçimde içerebilir veya dışarıda bırakabilir; bu da içeriğin kısmen gizlenmesine neden olur.

dvh — Dinamik Görünüm Alanı Yüksekliği

dvh (dinamik görünüm alanı yüksekliği), tarayıcı arayüzü ayarlandıktan sonra gerçek görünen yüksekliği yansıtacak şekilde dinamik olarak güncellenir. Mobildeki 100vh sorununu çözer.

<div class="mobile-hero">Dynamic viewport height (100dvh)</div>

svh ve lvh

CSS ayrıca svh (küçük görünüm alanı yüksekliği — tarayıcı arayüzünü her zaman dışarıda bırakır) ve lvh (büyük görünüm alanı yüksekliği — arayüz gizlenmiş gibi davranır) birimlerini de sunar. Bunlar, mobil görünüm alanı davranışı üzerinde ayrıntılı denetim sağlar.

vw ile Akışkan Tipografi

Yazı tipi boyutu için vw kullanmak, ekranla birlikte ölçeklenen metin oluşturur:

<h1>Fluid Heading</h1>

Görünüm Alanı Genişliğinin Sınırlamaları

100vw, masaüstü bilgisayarlarda kaydırma çubuğunun genişliğini de içerir. Dikkatsizce kullanıldığında bu, yatay taşmaya neden olur. vw birimini belirli durumlara ayırarak blok öğelerinde width: 100% kullanmayı tercih edin.

vmin ve vmax

1vmin = görünüm alanının daha küçük boyutunun (genişlik veya yükseklik) %1'i. 1vmax = daha büyük boyutun %1'i. Yön değişikliklerine uyum sağlayan kare kapsayıcılar için kullanışlıdır.

<div class="square"></div>

svw, lvw, dvw — Genişlik Çeşitleri

CSS, yükseklik çeşitlerinde olduğu gibi genişlik için de svw, lvw ve dvw birimlerini sunar. Dinamik çeşitler (dvw, dvh) mobil cihazlarda en kullanışlı olanlardır.

Pratik Kalıplar

Yaygın görünüm alanı birimi kalıpları:

min-height: 100dvh — mobil cihazlarda güvenli tam ekran bölümleri
height: 100svh — sabit kullanıcı arayüzü panelleri
font-size: clamp(1rem, 2.5vw, 2rem) — akışkan başlıklar
width: min(800px, 90vw) — güvenli genişlikte kapsayıcılar

Hızlı Kontrol

Tam ekran mobil bölümleri için dvh neden vh yerine tercih edilir?

İnteraktif derste cevapla

Özet

vw ve vh, görünüm alanı genişliğinin/yüksekliğinin %1'idir. Mobilde vh, tarayıcı arayüzü nedeniyle güvenilir değildir. Dinamik ve mobil cihazlarda doğru tam ekran düzenleri için dvh kullanın. vmin ve vmax, görünüm alanının daha küçük/büyük boyutuna göre davranır.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Görünüm Alanı Birimleri: vw, vh, dvh” dersi ücretsiz mi?

Evet — “Görünüm Alanı Birimleri: vw, vh, dvh” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Görünüm Alanı Birimleri: vw, vh, dvh” dersinde ne öğreneceğim?

Öğeleri vw, vh ve modern dvh birimlerini kullanarak tarayıcının görünüm alanına göre boyutlandırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Görünüm Alanı Birimleri: vw, vh, dvh” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön