Jump to content
  • entries
    21
  • comments
    0
  • views
    418

Viewport-Relative Units - CSS

Doğuhan ELMA

Entry posted by Doğuhan ELMA in Responsive

51 views

 Share

Viewport Nedir?

Viewport, tarayıcıda web sayfasının görünen alanıdır. Basitçe söylemek gerekirse, kullanıcının ekranında gördüğü sayfa bölgesidir. Dolayısıyla pencereyi küçültüp büyüttükçe bu değerler dinamik olarak yeniden hesaplanır.

Viewport değişince CSS’te:

  • vw, vh, vmin, vmax, svh, lvh, dvh gibi birimler yeniden hesaplanır.

  • Media queries tetiklenir.

  • Container queries yeniden değerlendirilir.

  • Safe-area env variables güncellenebilir.

  • Relative units (% / em / rem) dolaylı olarak etkilenir.

 

Çıkış sebebi: Mobil cihazlar ve farklı ekran çözünürlükleri.

İhtiyaç: Esnek, responsive tasarım, okunabilirlik, tam ekran bölümler.

Desktop vs Mobil Viewport

  • Desktop'ta: Viewport genellikle tarayıcı penceresinin boyutuna eşittir (vw viewport genişliğidir → scrollbar varsa, dahil edilir.).
  • Mobil cihazlarda: Durum biraz daha karmaşıktır çünkü ekran küçüktür. Ekran boyutu, genellikle dinamik olarak değişir (adres çubuğu açılınca kapanır vs).

Viewport Meta Tag'i

HTML'de viewport kontrolü için <head> bölümüne şu meta tag'i eklenir: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu Tag'in Parametreleri:

width=device-width

  • Sayfanın genişliğini cihazın ekran genişliğine eşitler
  • Bu sayede mobil cihazlarda sayfa doğru boyutta görünür

initial-scale=1.0

  • Sayfa ilk yüklendiğinde zoom seviyesini belirler
  • 1.0 = %100 zoom (yakınlaştırma/uzaklaştırma yok)

Diğer Parametreler: 

<meta name="viewport" content="
  width=device-width, 
  initial-scale=1.0,
  maximum-scale=5.0,
  minimum-scale=1.0,
  user-scalable=yes
">
  • maximum-scale: Maksimum zoom seviyesi
  • minimum-scale: Minimum zoom seviyesi
  • user-scalable: Kullanıcının zoom yapıp yapamayacağı (yes/no)

Neden Önemli?

Viewport meta tag'i olmadan, mobil tarayıcılar sayfayı desktop genişliğinde (genellikle 980px) render eder ve küçültür. Bu durumda:

  • Yazılar çok küçük görünür
  • Kullanıcı sürekli zoom yapmak zorunda kalır
  • Mobil deneyim kötü olur

Viewport meta tag'i ile responsive tasarım yapabilir, her cihazda optimize görünüm sağlarsın.

Modern web tasarımında viewport-relative units (görünüm alanı göreli birimleri), responsive tasarımın temel taşlarından biri. Her birimin kendine özgü kullanım senaryoları ve dikkat edilmesi gereken noktalar var.

  • Meta viewport yoksa birimler çalışır, ama mobilde ölçümler güvenilir olmayabilir.

  • Modern responsive tasarımda mobil uyumluluk için meta viewport mutlaka kullanılır.

 

Temel Viewport Birimleri

Birimler;

  • Dil veya yazı yönüne göre değişmez.

  • İçerik genişliği yada yüksekliğine göre değişmez.

 

vw (Viewport Width):

Viewport genişliğinin(yatay ekran) %1'i anlamına gelir. 

  • 100vw = Viewport'un tam genişliği
  • 50vw = Viewport genişliğinin yarısı 
.hero-section {
  width: 100vw; /* Tam genişlik */
  font-size: 5vw; /* Responsive tipografi */
}

Kullanım Alanları:

  • Full-width layoutlar
  • Fluid tipografi
  • Responsive spacing sistemleri

Olumsuz Yönleri:

  • Scrollbar sorunu: 100vw genişlik, vertical scrollbar'ı hesaba katmaz. Eğer sayfada scrollbar varsa, yatay scrollbar oluşur. (yaklaşık 15-17px taşma). dikey scrollbar oluşmuşsa 100vw içinde scrollbarda olur. Bu durumda, width: 100vw-20px 
  • Mobile browser bar'lar: Mobil tarayıcılarda adres çubuğu viewport hesabını karıştırabilir.

  • Mobilde Portrait (dikey): 100vw cihazın dikey moddaki dar kenarı kadar olur.

  • Mobilde Landscape (yatay): 100vw cihazın yatay moddaki geniş kenarı kadar olur. 👉 Yani cihazı çevirdiğinde vw değeri değişir çünkü viewport genişliği değişir.

  

/* Scrollbar sorunu çözümü */
.full-width {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

 

vh (Viewport Height):

Viewport yüksekliğinin %1'i. 

.hero {
  height: 100vh; /* Tam ekran yükseklik */
}

Olumsuz Yönleri:

  • Mobile browser sorunları: iOS Safari ve benzeri mobile tarayıcılarda adres çubuğu görünüp kaybolduğunda 100vh sürekli değişir, bu da layout shift'lere neden olur.
  • Landscape mode sorunları: Yatay modda yükseklik çok düşük olabilir, içerik taşabilir.
  • Keyboard açıldığında: Mobilde keyboard açıldığında viewport height küçülür, layout bozulabilir.

  

/* Mobile için daha güvenli yaklaşım */
.hero {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height */
}

 

  • vh ve vw birimleri pencere boyutuna göre değişir.
  • Modern tasarımlarda dvh gibi yeni birimler kullanmak en temiz çözümdür.

 

vmin & vmax:

  • vmin: Viewport'un en küçük boyutunun %1'i, vmin aslında min(vw, vh) şeklinde düşünülebilir.
  • vmax: Viewport'un en büyük boyutunun %1'i, vmax ise max(vw, vh) şeklinde düşünülebilir.
     

 

Mobilde:

  • Portrait (dikey mod)

    Genişlik > Yükseklik: vmin = genişlik, vmax = yükseklik

  • Landscape (yatay mod)

    Genişlik > Yükseklik: vmin = yükseklik, vmax = genişlik

Desktop’ta orientation değişmez ama pencereyi çok yatay veya çok dikey yaparsan küçük/büyük kenar değişir.

vmin ve vmax modern tasarımda fluid (akışkan) ve responsively ölçeklenen öğeler oluşturmak için çok kritik iki birimdir. Çünkü bu iki birim ekranda hangi kenarın baskın olduğunu otomatik algılar ve ona göre boyut verir.

 

Kullanım alanları:

  

h1 {
  font-size: 8vmin; /* Hem geniş hem dar ekranda orantılı büyür */
}

Avantaj:

  • Mobilde çok büyümez, masaüstünde çok küçülmez.

  • Tasarımı sabit piksel bağımlılığından kurtarır.

  

.square {
  width: 50vmin;
  height: 50vmin; /* Her zaman kare kalır */
}

.adaptive-text {
  font-size: 3vmax; /* Hem portrait hem landscape'de okunabilir */
}

Neden vmin?
Çünkü kısa kenara göre hesaplar → daire hiçbir ekranda ezilmez.

  

.hero-title {
  font-size: 10vmax; /* Geniş monitörde büyük, telefonda daha küçük */
}

Neden vmax?
Uzun kenara göre hesaplar → geniş ekranda etkili, devasa başlıklar sağlar.

  

.section {
  padding: 5vmin;
}

Mobilde “çok doldurmaz”, geniş ekranda “çok boşaltmaz”. Tamamen oranlıdır.

 

vmin: kare/daire, fluid font, responsive spacing

vmax: hero başlıkları, geniş ekran tasarımları, dramatik boyutlar

 

Kullanım Senaryoları:

  • Aspect ratio korumak istediğinizde
  • Orientation-independent tasarımlar

Olumsuz Yönleri:

  • Tahmin edilebilirlik: Hangi boyutun kullanılacağını öngörmek zor olabilir.
  • Debugging zorluğu: Davranışları anlamak ilk başta kafa karıştırıcı.

 

Modern Viewport Birimleri (2022+)

CSS Spec'e yeni eklenen, mobile browser sorunlarını çözen birimler:

svh, svw (Small Viewport)

UI kontrolleri görünür olduğunda viewport boyutu.

  • Mobile'da address bar açıkken olan boyut

lvh, lvw (Large Viewport)

UI kontrolleri gizli olduğunda viewport boyutu.

  • Mobile'da address bar kapalıyken olan boyut

dvh, dvw (Dynamic Viewport)

UI kontrollerinin durumuna göre dinamik değişen boyut.

  • En gerçekçi boyut, ama performans maliyeti var 
.hero {
  /* Klasik yaklaşım - mobile'da sorunlu */
  height: 100vh;
  
  /* Modern yaklaşım - mobile browser bar'ları hesaba katar */
  height: 100dvh;
  
  /* Fallback stratejisi */
  height: 100vh;
  height: 100dvh; /* Destekleyen tarayıcılarda geçerli olur */
}

.fixed-header {
  /* Small viewport - UI her zaman görünür */
  height: 10svh;
}

.content-area {
  /* Large viewport - maksimum alan */
  min-height: 100lvh;
}

Browser Desteği Sorunu:

  • Nisan 2023 itibariyle major tarayıcılarda destek var
  • Eski tarayıcılar için fallback şart 
/* Progressive Enhancement */
.section {
  height: 600px; /* Fallback */
  height: 100vh; /* Eski tarayıcılar */
  height: 100dvh; /* Modern tarayıcılar */
}

 

Genel Olumsuz Yönler ve Dikkat Edilmesi Gerekenler

1. Accessibility Sorunları 

/* ❌ Kötü - kullanıcı zoom yaptığında okunaksız */
body {
  font-size: 1.5vw;
}

/* ✅ İyi - minimum ve maksimum değerler */
body {
  font-size: clamp(16px, 1.5vw, 24px);
}

Viewport birimleriyle font-size kullanırken kullanıcı tarayıcıda zoom yaptığında metin boyutu değişmez (px gibi sabit kalır). Bu WCAG accessibility kurallarını ihlal eder.

 

2. Performans Sorunları

Viewport birimleri sürekli yeniden hesaplanır:

  • Window resize'da
  • Scroll'da (özellikle mobile'da address bar)
  • Orientation change'de 
/* Dikkatli kullanım */
.element {
  /* Her scroll'da repaint tetikler */
  transform: translateY(calc(50vh - 50%));
}

 

3. Print Media Sorunları 

/* Print'te viewport birimleri belirsiz davranır */
@media print {
  .hero {
    height: 100vh; /* Kağıt boyutunu mu, ekran boyutunu mu alır? */
    height: auto; /* Daha güvenli */
  }
}

 

4. Container Query ile Çakışma 

/* Viewport vs Container - hangisi kullanılmalı? */
.card {
  /* Viewport'a göre - tüm ekrana göre ayarlanır */
  padding: 2vw;
  
  /* Container'a göre - parent'a göre ayarlanır (modern) */
  padding: 2cqw;
}

Modern yaklaşımda container query birimleri (cqw, cqh) daha mantıklı olabilir.

 

5. Hesaplama Karmaşıklığı 

/* Karmaşık ve debug edilmesi zor */
.element {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50%);
  padding: calc(2vmin + 1rem);
}

 

Best Practices

Güvenli Kullanım Örnekleri: 

/* 1. Fluid Typography - clamp ile */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

/* 2. Full-width sections - overflow kontrolü ile */
.full-width {
  width: 100%;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* 3. Hero sections - fallback ile */
.hero {
  min-height: 600px; /* Fallback */
  min-height: 100vh; /* Standart */
  min-height: 100dvh; /* Modern */
}

/* 4. Responsive spacing - rem ile kombinasyon */
.section {
  padding: clamp(2rem, 5vw, 6rem);
}

/* 5. Aspect ratio control - vmin ile */
.video-container {
  width: 80vmin;
  height: 45vmin; /* 16:9 aspect ratio her durumda */
}

Kaçınılması Gerekenler: 

/* ❌ Kesinlikle yapma */
* {
  font-size: 2vw; /* Accessibility felaketi */
}

/* ❌ Scrollbar sorunları */
body {
  width: 100vw; /* Yatay scroll oluşturur */
}

/* ❌ Mobile keyboard sorunu */
.modal {
  height: 100vh; /* Keyboard açıldığında kesilir */
}

/* ❌ Aşırı karmaşık hesaplamalar */
.element {
  width: calc(100vw - (100vw - 100%) - 2rem);
}

Özet

Viewport birimleri güçlü araçlar ama:

  • Mobile browser davranışlarını iyi bilmek şart
  • Her zaman fallback değerler kullanın
  • Accessibility'yi göz ardı etmeyin (clamp kullanın)
  • Modern dvh, svh, lvh birimlerini öğrenin
  • Performans etkilerini düşünün
  • Container query birimlerini de değerlendirin

Doğru kullanıldığında viewport birimleri gerçekten responsive ve fluid tasarımlar oluşturmanıza olanak sağlar, ama tuzaklarını bilmek kritik.

 Share

0 Comments

Recommended Comments

There are no comments to display.

×
×
  • Create New...

Important Information

  I accept