Görünüm Noktaları (Viewports)
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> Etiketi: Mobil cihazlarda doğru ölçeklendirme sağlamak için gereklidir.
- width=device-width: Sayfanın genişliğini cihazın ekran genişliğine ayarlar.
- initial-scale=1.0: Başlangıç zoom seviyesini 1’e ayarlar (yani, sayfa orijinal boyutunda gösterilir).
Medya Sorguları (Media Queries)
Belirli koşullar altında farklı CSS kurallarının uygulanmasını sağlayan bir tekniktir. Bu koşullar, ekran genişliği, cihaz yönü, çözünürlük vb. olabilir.
- Sözdizimi: @media (koşul) { /* Stiller */ }
- max-width: Ekran genişliğinin belirli bir değerden küçük veya eşit olduğu durumlarda uygulanır.
- min-width: Ekran genişliğinin belirli bir değerden büyük veya eşit olduğu durumlarda uygulanır.
- orientation: portrait: Cihazın dikey (portre) modunda olduğu durumlarda uygulanır.
- orientation: landscape: Cihazın yatay (manzara) modunda olduğu durumlarda uygulanır.
- Örnek:
- @media (max-width: 768px) { /* Tablet ve mobil cihazlar için stiller */ }
- @media (min-width: 992px) { /* Masaüstü cihazları için stiller */ }
Esnek Görüntüler (Flexible Images)
- Sorun: Sabit genişlikli resimler, küçük ekranlarda bozulabilir veya sayfa dışına taşabilir.
- Çözüm: max-width: 100%; ve height: auto; özellikleri kullanılarak resimlerin kapsayıcılarına sığması sağlanır. Bu, resmin boyutunu otomatik olarak ayarlayarak duyarlı hale getirir.
- <picture> Etiketi (Giriş): Farklı ekran çözünürlüklerine farklı resimler sunmak için <picture> etiketi kullanılır.
Duyarlı Düzenler (Responsive Layouts)
Flexbox ve Grid kullanarak duyarlı düzenler oluşturmak önemlidir. Bu sistemler, farklı ekran boyutlarına uyum sağlayabilen esnek düzenler tasarlanmasını sağlar.
Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS