Bu blog, Tailwind'de aşırı kaydırma yardımcı programını kullanarak medya sorguları ve kesme noktaları uygulama sürecini gösterecektir.
Tailwind'de Overscroll ile Medya Sorguları ve Kesme Noktaları Nasıl Uygulanır?
CSS söz konusu olduğunda kesme noktalarını veya onun diğer adı olan medya sorgularını uygulamak için “ aşırı kaydırma ' Yarar. HTML programı oluşturulur ve farklı kesme noktaları uygulanır “ sm ', ' MD ' veya ' lg 'overscroll' yardımcı programından uygun yardımcı program sınıflarıyla. Farklı ekran boyutlarındaki öğelerin kaydırma davranışını değiştirir.
1. Adım: HTML kodundaki Kesme Noktalarını ve Medya Sorgularını kullanın
Bir HTML belgesi oluşturun ve her kesme noktası için ekran boyutları ve medya sorguları olan kesme noktalarını uygulayın. Örneğin ' MD ' Ve ' lg Aşağıdaki kodda metin boyutu için kesme noktaları kullanılmış ve buna aşırı kaydırma davranışı uygulanmıştır:
< vücut sınıf = 'bg-slate-500' >
< div sınıf = 'metin-kırmızı-900 p-4 lg:p-8' >
< P sınıf = 'göreceli md:mutlak md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none lg:text-xl lg:statik lg:translate-x-4 lg :çevir-y-4 ' > Bu metin, ekran boyutuna bağlı olarak farklı yazı tipi boyutlarına sahip olacaktır. BT küçük ekranlarda daha küçük olacak , orta - orta ekranlarda boyutlu , ve büyük ekranlarda daha büyük. P >
div >
vücut >
Bu kodda:
- “ bg-slate-500 ” arka plan rengini griye ayarlar.
- “ metin-kırmızı-900 ” metin rengini kırmızı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” ” etiketi, “ kullanılarak ana sayfaya göre ayarlanır. akraba ' sınıf.
- “ md:mutlak ” orta boyutlu bir ekranda metnin konumunu göreceliden mutlak olarak değiştirin.
- “ md:overscroll-contain ”, ekran orta büyüklükte olduğunda sayfanın tamamını etkilemek yerine “fazla kaydırma” davranışının o öğenin içinde yer almasını sağlar.
- “ md:metin-lg ” metni orta boyutlu bir ekranda büyütür.
- “ md:çevir-x-4 ' Ve ' md:çevir-y-4 'metni taşı' 4 piksel ” orta ekran boyutunda aşağı ve sağa.
- “ lg: fazla kaydırma-yok ” “ aşırı kaydırma ” class özelliğini büyük boyutlu bir ekranda none olarak değiştirin.
- “ lg: metin-xl ”, büyük boyutlu bir ekran için metin boyutunu ekstra büyük olarak değiştirir.
- “ lg:statik ” büyük boyutlu bir ekran için metnin ana sayfaya göre konumunu mutlaktan statike değiştirir
- “ lg:çevir-x-4 ' Ve ' lg:çevir-y-4 ” büyük ekran boyutunda metni 4 piksel aşağı ve sağa taşıyın.
2. Adım: Çıktıyı Önizleyin
Şimdi, yukarıdaki HTML kodunu çalıştırarak oluşturulan web sayfasını önizleyin ve görünür değişiklikleri görmek için HTML sitesinin ekran boyutunu değiştirin:
Yukarıdaki ekranda “ aşırı kaydırma ” davranışı görülmekte ve ekran boyutu küçültüldüğünde kendisine uygulanan medya sorgularına göre metin boyutunun değiştiği görülmektedir.
Çözüm
Medya sorgularını ve kesme noktalarını “ ile uygulamak için aşırı kaydırma ' yardımcı programında, 'overscroll' yardımcı programından istediğiniz sınıfla kesme noktalarını belirtin. Medya sorguları, ekran boyutunu değiştirerek ekranın çıkışını ayarlar. Bu blog, Tailwind'de medya sorgularını ve kesme noktalarını 'fazla kaydırma' davranışıyla uygulama sürecini gösterdi.