Medya Sorguları
Medya Sorguları (Media Queries) CSS’de responsive tasarımın temel taşlarından biridir. Kullanıcıların farklı cihazlarda – bilgisayar, tablet veya mobil telefon – en iyi deneyimi yaşamasını sağlar. Tıpkı bir evi inşa ederken odaların işlevine göre tasarım yapmak gibi, web sitelerinde de ekran boyutuna ve cihaz özelliklerine göre düzenlemeler yapmak gerekir.
Kişisel web sitelerinde, medya sorguları içerik bloklarının ve menülerin mobil cihazlarda düzgün görünmesini sağlar. Bloglarda metin boyutu ve resim düzenleri ekran boyutuna göre değiştirilebilir. E-ticaret sitelerinde ürün kartları ve butonlar farklı cihazlarda uyumlu görünür, böylece alışveriş deneyimi optimize edilir. Haber sitelerinde ise font ve görsel boyutları okunabilirliği artırmak için adapte edilir.
Bu eğitimde, medya sorgularının temel ve ileri düzey kullanımlarını öğreneceksiniz. Min-width, max-width ve orientation gibi özelliklerin nasıl uygulanacağını görecek ve gerçek dünya örnekleri üzerinden öğrenim kazanacaksınız. Medya sorguları, bir kütüphaneyi düzenlemek gibi, site içeriğinin erişilebilir ve kullanıcı dostu olmasını sağlar.
Temel Örnek
css/* Temel Medya Sorgusu Örneği */
body {
font-size: 16px; /* Default font size */
background-color: #f5f5f5; /* Default background */
}
/* Ekran genişliği 768px'den küçükse uygulanır */
@media (max-width: 768px) {
body {
font-size: 14px; /* Küçük cihazlar için font küçültme */
background-color: #e0e0e0; /* Arka planı daha açık yap */
}
}Bu örnekte önce tüm cihazlar için temel stil tanımlanmıştır: font boyutu 16px, arka plan açık gri. Daha sonra @media kullanılarak ekran genişliği 768px veya daha küçük olan cihazlar için stil değişiklikleri yapılmıştır.
Max-width özelliği, yalnızca belirli genişlikten küçük cihazlarda uygulanacak stili belirler. Bu sayede mobil cihazlarda yazılar okunaklı, arka plan gözü yormayan bir renk ile değiştirilir. Bu yaklaşım, blog ve haber sitelerinde içerik bloklarının mobil uyumluluğunu sağlamak için sıkça kullanılır. Medya sorguları, bir odanın mobilyalarını ölçüsüne göre yerleştirmek gibi, site düzenini cihazlara göre optimize eder.
Pratik Örnek
css/* E-ticaret sitesi ürün kartları örneği */
.container {
display: grid; /* Grid ile düzen */
grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
gap: 20px; /* Elemanlar arası boşluk */
}
.product-card {
background-color: #fff;
padding: 15px;
border-radius: 8px;
}
/* Tabletler için */
@media (max-width: 1024px) {
.container {
grid-template-columns: repeat(2, 1fr); /* 2 sütun */
}
}
/* Mobil cihazlar için */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr; /* Tek sütun */
}
}Bu örnekte CSS Grid kullanılarak ürün kartları düzenlenmiştir. Başlangıçta üç sütun ile tasarım yapılmıştır.
Medya sorgusu ile tabletlerde iki sütun ve mobil cihazlarda tek sütun görüntü sağlanmıştır. Böylece ürünler her cihazda düzgün bir şekilde sıralanır ve kullanıcı deneyimi artırılır. Blog veya portföy sitelerinde de benzer yaklaşım ile makaleler veya projeler uyumlu şekilde gösterilebilir. Bu yöntem, bir odanın mobilyalarını farklı boyutlardaki alanlara göre yeniden düzenlemek gibi, görsel ve fonksiyonel uyumu garanti eder.
En iyi uygulamalar arasında mobile-first tasarım yaklaşımı yer alır; yani önce küçük ekranlar için stil tanımlayıp, sonra geniş ekranlara göre genişletmek. Bu, performans ve bakım kolaylığı sağlar. Kodları modüler ve organize yazmak, specificity çakışmalarını önler.
Yaygın hatalar arasında breakpoint’lerin yanlış seçilmesi, mobil cihazlar göz ardı edilmesi, fazla override kullanımı ve medya sorgularının iç içe geçmesi yer alır. Debug için tarayıcı DevTools kullanmak ve farklı cihazlarda test yapmak önemlidir. Pratik öneriler: breakpoint’leri içeriğe göre belirleyin, CSS’i modüler tutun ve her zaman okunabilirliği test edin; tıpkı bir kütüphanede kitapları doğru raflara yerleştirmek gibi.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| @media | Medya sorgusu başlatır | @media (max-width: 768px) { ... } |
| min-width | max-width | Ekran genişlik aralığını belirler |
| orientation | Cihaz yönünü kontrol eder | @media (orientation: landscape) { ... } |
| hover | Cihazın hover özelliğini kontrol eder | @media (hover: hover) { ... } |
| pointer | Giriş cihazı türünü belirler | @media (pointer: coarse) { ... } |
Özetle, medya sorguları responsive tasarımın temel aracıdır. Ekran genişliğine, yönüne ve cihaz özelliklerine göre stil değişiklikleri yaparak kullanıcı deneyimini optimize eder. HTML yapısı ile doğrudan bağlantılıdır; çünkü container’lar ve içerik blokları doğru şekilde yerleştirildiğinde medya sorguları daha etkin çalışır.
Sonraki adımlar olarak CSS Grid ve Flexbox ile medya sorgularını birlikte kullanmayı, etkileşimli ve responsive layout’lar oluşturmayı öğrenebilirsiniz. Sürekli pratik ve farklı cihazlarda test, becerilerinizi güçlendirir ve profesyonel, erişilebilir web siteleri oluşturmanıza yardımcı olur.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 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