“CSS Media Queries – Örnekler ve Kullanımlar”

CSS Media Queries, web geliştiricilerin web sitelerini farklı cihazlara ve ekran boyutlarına uyumlu hale getirmelerine yardımcı olan güçlü bir araçtır. Bu yazıda, CSS Media Queries’in nasıl kullanıldığını ve farklı örneklerini ele alacağız.

1. Basit Bir Örnek: Ekran Genişliğine Göre Stil Değişimi

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Bu örnek, ekran genişliği 600 pikselden daha dar olduğunda, sayfa arka plan rengini hafif mavi olarak değiştirir.

2. Mobil ve Masaüstü Stilleri Ayarlama

/* Mobil Stilleri */
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* Masaüstü Stilleri */
@media only screen and (min-width: 601px) {
  body {
    font-size: 16px;
  }
}

Bu örnek, 600 pikselden daha dar ekranlarda metin boyutunu 14 piksel olarak ayarlar, 601 pikselden daha geniş ekranlarda ise 16 piksel olarak ayarlar.

3. Ekran Çözünürlüğüne Göre Resim Yüklemek

@media only screen and (max-width: 600px) {
  .hero-image {
    background-image: url('small-image.jpg');
  }
}

@media only screen and (min-width: 601px) {
  .hero-image {
    background-image: url('large-image.jpg');
  }
}

Bu örnek, 600 pikselden daha dar ekranlarda küçük bir görsel kullanırken, 601 pikselden daha geniş ekranlarda büyük bir görsel kullanır.

4. Yatay ve Dikey Ekran Yönetimi

/* Dikey Ekran */
@media only screen and (orientation: portrait) {
  .landscape-content {
    display: none;
  }
}

/* Yatay Ekran */
@media only screen and (orientation: landscape) {
  .portrait-content {
    display: none;
  }
}

Bu örnek, dikey ekranlarda yatay içeriği gizlerken, yatay ekranlarda dikey içeriği gizler.

CSS Media Queries, web sitelerinin farklı cihazlara uyumlu olmasını sağlamanın güçlü bir yoludur. Yukarıdaki örnekler, farklı durumlarda nasıl kullanılabileceğini göstermektedir. Umarım bu yazı, Media Queries’i daha iyi anlamanıza ve kullanmanıza yardımcı olur!