Medya Sorgu Oluşturucu Ön tanımlı breakpoint'lerle birlikte özellik koşullarına sahip CSS medya sorgularını oluşturun.

🎨

Medya Sorgu Oluşturucu

Ön tanımlı breakpoint'lerle birlikte özellik koşullarına sahip CSS medya sorgularını oluşturun.

Önceden ayarlanmış bir seçeneği kullanın veya özelleştirin

Bir ortak önceden ayarlanmış seçeneği seçin veya medya özellikleri ile özel koşullar ekleyin.

Koşulları yapılandırın

Medya türünü, özellik koşullarını ayarlayın ve AND veya OR operatörleri ile birleştirin.

Sorguyu kopyalayın

Stil sayfanızda kullanmak için hazırlanan medya sorgusunu kopyalayın.

Loading tool...

What Is Medya Sorgu Oluşturucu?

Medya Sorgu Oluşturucu, responsiv tasarım ve özelliklerin algılanması için CSS medya sorgularını oluşturmanıza yardımcı olur. Medya sorguları, görünüm genişliği, yükseklik, yön, renk şeması tercihleri gibi cihaz özellikleri temelinde koşullu olarak CSS kurallarını uygular. Bu araç, ortak kullanım durumları için (mobil, tablet, masaüstü, karanlık mod, yazdırma, azaltılmış hareket) önceden ayarlanmış sorgular ve karmaşık koşulları oluşturmak için özel bir oluşturucu sağlar. Medya türünü (ekran, yazdırma, tümü) ayarlayabilir, birden çok özellik koşulunu ekleyebilir ve bunları nasıl birleştireceğinizi seçebilirsiniz (VEYA veya VE). Oluşturulan sorgu, @media kuralı ve parantezler ile doğru sözdizimini içerir ve CSS'nize yapıştırma hazır durumdadır.

Why Use Medya Sorgu Oluşturucu?

Mobil, tablet, masaüstü, koyu mod ve daha fazlası için ortak önceden ayarlanmış seçenekler
Tüm CSS medya özellikleri dahil modern olanlar da desteklenir
Birden çok koşulu birleştirmek için AND/VEYA operatörleri
Hızlı réféans için ortak kırılma noktalarının tablosu

Common Use Cases

Cevrimli Düzenler

Farklı ekran boyutları için kırılma noktasına dayalı stiller oluşturun.

Koyu Mod Desteği

Koyu mod stilleri için prefers-color-scheme sorguları oluşturun.

Yazdırma Stil Sayfaları

Yazdırma için optimize edilmiş stiller için @media print sorguları oluşturun.

Erişilebilirlik Özellikleri

Azaltılmış hareket ve kontrast tercihlerine yönelik erişilebilir tasarımlar için hedefleyin.

Technical Guide

CSS medya sorguları, stilleri koşullu olarak uygulamak için @media kuralını kullanır. Sözdizimi @media [tür] ve (koşul) { kurallar } şeklindedir. Medya türleri ekran, yazdırma ve tümü içerir. Medya özellikleri cihaz yeteneklerini test eder: min-genişlik/maksimum genişlik responsiv kesme noktaları için, yön manzara/dik duruş için, renk şeması tercihleri karanlık/açık mod için, azaltılmış hareket animasyon duyarlılığı için, hover imlecin üzerine gelme yeteneği için ve işaretçi girişi kesinliği için kullanılır. Birden çok koşul and anahtar kelimesi ile tüm koşullar için veya virgülle ayrılarak herhangi bir koşul için birleştirilir. not anahtar kelimesi bir sorguyu reddeder. Modern özellikler gibi renk şeması tercihleri ve azaltılmış hareket, kullanıcı tercihleri için ilerici geliştirmeyi sağlar. Mobil öncelikli yaklaşım için min-genişlik sorgularını kullanın. Masaüstü öncelikli için maksimum genişlik sorgularını kullanın. Her ikisini birleştirmek @media (min-genişlik: 768px) ve (maksimum genişlik: 1023px) gibi aralık sorguları oluşturur.

Tips & Best Practices

1
Daha iyi performans için mobil öncelikli yaklaşım ile min-width sorgularını kullanın
2
Erişilebilirlik için her zaman prefers-reduced-motion'u dahil edin
3
Otomatik koyu mod desteği için prefers-color-scheme'i test edin
4
Belirli cihaz kategorilerini hedeflemek için aralık sorguları (min ve max) kullanın

Related Tools

CSS Flexbox Oyun Alanı

Tüm esnek konteynır özelliklerine sahip etkileşimli kontrollerle görsel CSS Flexbox keşfi.

🎨 CSS & Design

CSS Grid Oyun Alanı

Etkileşimli kontroller ile şablon sütunları, satırları ve boşlukları oluşturabileceğiniz görsel CSS Grid yapımcısı.

🎨 CSS & Design

Cevrimiçi Tasarım Testeri

Yerleşik iframe görüntüleyici ile ortak cihaz kesme noktalarında web sitelerini önizleyin.

🎨 CSS & Design

Yazdırma Stil Sayfası Oluşturucu

@media yazdırma stil sayfalarını, öğeleri gizleme, metni stilendirme ve sayfa kesintilerini kontrol etme seçenekleriyle oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Min-width mi yoksa max-width mı kullanmalıyım?

Min-width, mobil öncelikli (önerilen) yaklaşımı takip eder. Max-width, masaüstü öncelikli yaklaşımı takip eder. Tasarım yaklaşiminize göre seçin.

Q Hangi kırılma noktalarını kullanmalıyım?

Ortak kırılma noktaları: 640px (mobil), 768px (tablet), 1024px (laptop), 1280px (masaüstü), 1536px (büyük masaüstü).

Q Birden çok koşulu birleştirebilir miyim?

Evet, tüm koşulları gerektirmek için and kullanın veya herhangi bir koşulun eşleşmesi için virgül kullanın.

Q Prefers-color-scheme nedir?

Kullanıcının işletim sistemini koyu veya açık moda ayarlayıp ayarlamadığını algılar ve otomatik tema geçişine olanak tanır.

Q Azaltılmış hareketi nasıl destekleyebilirim?

Hassas kullanıcılar için animasyonları devre dışı bırakmak veya azaltmak için @media (prefers-reduced-motion: reduce) kullanın.

About This Tool

Medya Sorgu Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.