Media Query Üretici

Bu araç ne işe yarar?

Medya Sorgusu Oluşturucu, duyarlı tasarımlar için CSS @media kurallarını saniyeler içinde üretir. Bir min ve/veya max değeri girip width ya da height türünü seçerek geçerli bir medya sorgusu elde edersiniz; ayrıca Mobile, Tablet, Laptop ve Desktop 4K gibi yaygın kırılma noktası ön ayarlarına tek tıkla erişebilirsiniz. Duyarlı arayüzler kuran her seviyeden ön uç geliştiricisi için kullanışlıdır.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Hazır kırılma noktaları ve özelleştirme

Araç, 320px'lik Mobile S'ten 2560px'lik Desktop 4K'ya kadar yedi standart kırılma noktası düğmesi sunar; bir düğmeye tıkladığınızda min değeri otomatik ayarlanır. İsterseniz min ve max alanlarını elle girerek tam bir aralık tanımlayabilir, herhangi birini 0 yaparak o koşulu devre dışı bırakabilirsiniz. width yerine height seçerek dikey kırılma noktaları için sorgular da oluşturabilirsiniz.

Sıkça sorulan sorular

Hem min hem max değer girersem ne olur?

İki koşul 'and' ile birleştirilir; örneğin (min-width: 768px) and (max-width: 1024px) gibi yalnızca belirttiğiniz aralıkta geçerli olan bir sorgu üretilir.

Bir alanı neden 0 yapayım?

0 değeri o koşulu kapatır. Yalnızca alt sınır isterseniz max'ı 0 bırakın; yalnızca üst sınır için min'i 0 yapın. Böylece tek yönlü sorgular oluşturabilirsiniz.

Genişlik dışında neye göre sorgu yapabilirim?

Tür açılır menüsünden height seçerek viewport yüksekliğine dayalı medya sorguları üretebilirsiniz; bu, kısa ekranlarda yerleşimi ayarlamak için kullanışlıdır.