CSS medya sorgusu oluşturucu
Bootstrap, Tailwind veya özel kesme noktalarından mobil öncelikli veya masaüstü öncelikli CSS medya sorgusu blokları oluştur.
CSS medya sorgusu oluşturucu
Bir kesme noktası ölçeği seç ve bu araç, yapıştırmaya hazır @media bloklarını yaz. Bootstrap veya Tailwind ön ayarlarını seçerek bu çerçevelerin kesme noktalarını yeniden kullan veya Özel moduna geç ve kendi genişliklerini virgülle veya satır sonuyla ayrılmış olarak yazabilirsin — "480, 768, 1024" gibi düz sayılar otomatik olarak adlandırılır veya her birini "tablet:768" gibi etiketlerle eşleştirebilirsin.
Mobil öncelikli çıktı, yalnızca min-width ile yükselen sorgularla basamaklanır, bu bugün çoğu bileşen CSS'sinin yazıldığı kalıptır; masaüstü öncelikli ise yalnızca max-width ile alçalan sorgularla basamaklanır, en büyük kesme noktası ilk olur. Aralık söz dizimini açarak her kesme noktasını her iki tarafından sınırlandır — her blok o zaman yalnızca o banda uygulanır, en üst katman yukarıda açık kalır. Genişlikler px, em veya rem cinsinden yazdırılır, ortak 16px kök yazı tipi boyutu dönüşümü varsayılır. Dört ek geçiş, yönelim, hover-yeteneği olan göstergeler, prefers-color-scheme ve prefers-reduced-motion için bağımsız sorgular ekler, bir sayfa bu denetimleri düzen kesme noktalarının yanında gerektirdiğinde faydalı olur. Çıktı biçimini SCSS'ye değiştir ve her blok, @content yerine adlandırılmış bir @mixin olur, böylece Sass yapınız kuralın gerekli olduğu her yerde @include yapabilir.
Bir kesme noktası listesi, kullanılabilir hiçbir şeye çözümlenirse — boş ise veya her giriş sayı değilse — açıkça raporlanır; kırılmış CSS üretmek yerine yinelenen genişlikler bir bloka çöker, ilk adlarını koruyarak. Çok uzun özel listeler sınırlandırılır, bu nedenle muazzam veya bozuk bir değer yapıştırmak hiçbir zaman sekmeyi dondurmaz.
Her şey tarayıcında yerel olarak çalışır — yazdığın hiçbir şey hiçbir yere yüklenmez. Sonucu kopyala, .txt dosyası olarak indir veya devam etmek için doğrudan başka bir aracın girdisine gönder.