toolsmoah

Görünüm Alanı Medya Sorgusu Oluşturucu

Duyarlı web tasarımı için CSS medya sorguları oluşturun.

Medya Sorgusu Ayarları
Medya sorgusu koşullarını yapılandırın

Koşul 1

Hazır Ayarlar
Sık kullanılan medya sorgusu desenlerini seçin
Oluşturulan CSS
@media screen and (max-width: 768px) {
  /* Your CSS rules here */
}
Ortak Kesme Noktaları
Mobil:max-width: 480px
Tablet:481px - 768px
Masaüstü:min-width: 1024px
Büyük Masaüstü:min-width: 1200px
Medya Sorgusu Kılavuzu

Anahtar Medya Özellikleri

  • • genişlik/yükseklik: Görünüm alanı genişliği/yüksekliği
  • • min-genişlik/max-genişlik: Minimum/maksimum genişlik koşulları
  • • yönelim: Ekran yönelimi (dikey/yatay)
  • • çözünürlük: Ekran çözünürlüğü (retina ekranlar vb.)
  • • hover: Üzerine gelme yeteneği desteği
  • • pointer: İşaretçi hassasiyeti (dokunma/fare)

Kullanım İpuçları

  • • Mobil İlk yaklaşım: Küçük ekranlardan tasarım yapmak için min-width kullanın
  • • Karmaşık koşulları mantıksal operatörlerle birleştirin
  • • Ayrı yazdırma stilleri için print medya türünü kullanın
  • • Yüksek çözünürlüklü ekran desteği için çözünürlük kullanın