CSS Medya Sorgusu Nedir?

CSS medya sorgusu, ekran boyutu, çözünürlük, yönelim veya renk şeması gibi cihaz özelliklerine göre farklı stiller uygulamanızı sağlayan bir tekniktir. Medya sorguları, duyarlı web tasarımının temelini oluşturur ve web sitelerinin akıllı telefonlardan masaüstü monitörlere kadar farklı cihazlarda düzen ve görünümünü uyarlamasını sağlar. CSS'te @media kuralını kullanarak, belirli koşullar karşılandığında stil uygulamalarını koşullu olarak gerçekleştirirler.

Araç Açıklaması

Bu araç, karmaşık sözdizimini ezberlemeden CSS medya sorguları oluşturmanıza yardımcı olur. Hedef medya tipinizi seçin, boyutları belirtin, cihaz özelliklerini seçin ve araç, stil sayfalarınızda kullanıma hazır tam @media kuralını oluşturur. Görüntüleme alanı boyutları, ekran yönelimi, en‑boy oranları, çözünürlük algılama ve renk şeması tercihleri dahil olmak üzere tüm modern medya sorgu özelliklerini destekler.

Özellikler

  • Medya Tipi Seçimi: Tüm, ekran, yazdırma veya konuşma medya tipleri arasında seçim yapın
  • Boyut Kontrolleri: Minimum ve maksimum genişlik/yüksekliği herhangi bir CSS birimi (px, em, rem, vw, vb.) ile ayarlayın
  • Cihaz Özellikleri: Yönelim, en‑boy oranı, çözünürlük ve renk şeması tercihlerini yapılandırın
  • Özel Koşullar: Hover yeteneği veya işaretçi türü gibi herhangi bir özel medya özelliği ekleyin
  • Mantıksal Operatörler: Karmaşık sorgular için koşulları AND, OR veya NOT operatörleriyle birleştirin
  • Canlı Önizleme: Ayarları değiştirirken oluşturulan CSS kodunun gerçek zamanlı olarak güncellenmesini görün
  • Yaygın Kesme Noktaları Referansı: Mobil, tablet, masaüstü ve özel özellikler için standart kesme noktalarına hızlı erişim

Kullanım Senaryoları

  • Farklı ekran boyutlarına uyum sağlayan duyarlı düzenler oluşturma
  • Tabletler veya akıllı telefonlar gibi belirli cihazları hedefleme
  • Karanlık ve aydınlık mod temalarını uygulama
  • Yazdırma stil sayfalarını optimize etme
  • Yüksek çözünürlüklü (retina) ekranları algılama
  • Cihaz yönelimine göre düzenleri ayarlama
  • Mobil‑öncelikli veya masaüstü‑öncelikli duyarlı tasarımlar oluşturma
  • CSS medya sorgusu sözdizimini test etme ve öğrenme