Yükleniyor...

HTML Responsive

Layout’tan sonra responsive: aynı URL telefonda ve masaüstünde. HTML viewport ile başlar; CSS tamamlar.

Bir URL, birçok genişlik

Ayrı mobil HTML yok. 1200px alışkanlığı yatay kaydırma yapar.

Doğrudan yanıt

1) viewport meta. 2) akışkan genişlikler. 3) img max-width:100%. Media query CSS konusudur.

📊 HTML unlocks vs CSS responsive tools

Layer Job for responsiveness Examples
HTML viewport Tell mobile browsers how to size the layout viewport meta name="viewport" with width=device-width
HTML structure Keep landmarks and flexible wrappers that can reflow header, main, aside, div.row (from layout)
CSS fluid sizing Let boxes and images shrink instead of overflow max-width, %, height: auto
CSS adaptation Change columns and spacing at breakpoints media queries, flex/grid tweaks (CSS courses)
Avoid Huge fixed pixels and layout tables fighting narrow screens width="1200", whole-page table chrome

Viewport meta — temel HTML parçası

Olmadan birçok telefon masaüstü tuvalini küçültür — metin minik görünür.

Viewport meta in head

html 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>

Viewport satırını okuyun

  • name=viewport anahtardır
  • width=device-width = cihaz genişliği
  • initial-scale=1.0 = %100
  • CSS hâlâ gerekir

Akışkan görseller — HTML işaret + CSS ölçek

img ve alt; ölçek CSS.

Fluid images helper

html 
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">

Akışkan kuralı okuyun

  • max-width:100%
  • height:auto oranı korur
  • width=1200 telefonda taşar

HTML açar; CSS tamamlar

Viewport ve esnek yapı HTML. Akışkan sütunlar ve breakpoint’ler CSS.

Alıştırma — yeniden boyut laboratuvarı

  1. viewport ekleyin
  2. geniş görsel + akışkan CSS
  3. pencereyi daraltın
  4. kısa süre width=1200 deneyin

Kolay hatalar

  • viewport unutmak
  • sabit 1200px medya
  • yalnız HTML yeter miti
  • layout tabloları

Özet

  • viewport zorunlu
  • akışkan görseller yardım eder
  • HTML + CSS
  • sırada: formlar

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 47 / 68
Html Ders