Bu makale, Tailwind'deki konum özelliğiyle birlikte kesme noktası ve medya sorgusunun nasıl kullanılacağını açıklayacaktır.
Konum Özelliğiyle Kesme Noktaları ve Medya Sorguları Nasıl Kullanılır?
Kesme noktaları, son derece duyarlı bir tasarım oluşturmanın temel bloklarıdır. Düzeni farklı ekran boyutlarına uyarlanabilir hale getirmek için kullanılır. Medya sorguları, ekran çözünürlüğüne bağlı olarak öğelere belirli stilleri uygulamak için kullanılır. Çıktıyı daha optimize hale getirmek için konum özelliği bunlarla birlikte uygulanabilir.
Adım 1: Konum Özelliğini Kesme Noktaları ve Medya Sorgularıyla Uygulama
Bu adımda, kesme noktaları veya ortam sorguları boyunca konum özelliğini seçilen “ P ” öğesi:
< vücut sınıf = 'bg-slate-500' >
< div sınıf = 'metin-sarı-300 p-4 lg:p-8' >
< P sınıf = 'göreceli md:mutlak md:metin-lg md:çevir-x-4 md:çevir-y-4 lg:metin-xl lg:statik lg:çevir-x-4 lg:çevir-y-4 ' > Bu metin, ekran boyutuna bağlı olarak farklı yazı tipi boyutlarına sahip olacaktır. Küçük ekranlarda daha küçük, orta ekranlarda orta büyüklükte, büyük ekranlarda ise daha büyük olacaktır. < / P >
< / div >
< / vücut >
Bu kodda:
- “ bg-slate-500 ” arka plan rengini griye ayarlar.
- “ metin-sarı-300 ” metin rengini sarıya dönüştürür.
- “ s-4 ” 4 piksellik bir dolgu ekler.
- “ lg: p-8' büyük ekranlara 8 piksellik bir dolgu ekler.
- Başlangıç konumu ana sayfaya göre “ akraba ' sınıf.
- “ md:metin-lg ” metni orta boyutlu bir ekranda büyütür.
- “md:mutlak” Orta boyutlu bir ekranda metnin konumunu göreceliden mutlak olarak değiştirir.
- “ md:çevir-x-4” Ve “md:çevir-y-4” orta ekran boyutunda metni 4 piksel aşağı ve sağa taşıyın.
- “ lg: metin-xl ”, büyük boyutlu ekranda metin boyutunu ekstra büyük olarak değiştirir.
- “ lg:statik ” büyük boyutlu bir ekranda metnin ana sayfaya göre konumunu mutlaktan statike değiştirir
- “ lg:çevir-x-4 ' Ve ' lg:çevir-y-4 ” metni geniş ekran boyutunda 4 piksel aşağı ve sağa taşıyın.
2. Adım: Çıktıyı Doğrulayın
Yukarıdaki kodla oluşturulan web sayfasını önizleyin ve değişikliği şu şekilde görmek için ekran boyutunu ayarlayın:
Metnin orta ve büyük ekran boyutlarında duyarlı davranış gösterdiği görülebilir.
Çözüm
Tailwind'de kesme noktalarını ve medya sorgularını kullanmak için kesme noktasını uygulayın ve medya sorgusunu her kesme noktasına ayarlayın ve ayrıca ekranın farklı kesme noktalarında konum özelliğini değiştirin. Varsayılan dökümler şunlardır: sm ', ' MD ', ' lg ', Ve ' XL ”. Bu blog, Tailwind'de konum özelliğiyle kesme noktası ve medya sorgusunun nasıl kullanılacağını gösterdi.