Bu makale, Tailwind CSS'de kesme noktaları ve medya sorguları ile 'sonradan' kullanma yöntemini gösterecektir.
Tailwind'de Kesme Noktaları ve Medya Sorguları ile “break-ard” Nasıl Kullanılır?
Kesme noktaları ve medya sorguları ile bir 'sonradan' kullanmak için, HTML programındaki 'sonradan' yardımcı programıyla farklı ekran boyutları için farklı değerler ve stiller tanımlayın. Ardından, HTML web sayfasını görüntüleyerek çıktıyı doğrulayın.
Pratik uygulamayı keşfedelim:
1. Adım: Kesme Noktalarını ve Medya Sorgularını 'break-after' Yardımcı Programıyla Kullanın
Bir HTML programı oluşturun ve 'break-after' yardımcı programıyla farklı ekran boyutları için farklı değerler ve stiller belirtin. Örneğin, “ md kesme noktası ile “ sütundan sonra ara ' yardımcı program ve ' lg kesme noktası ile “ kaçınılmasından sonra kırılma ' Yarar:
< vücut >
< div sınıf = 'sütunlar-2 bg-teal-400' >
< P sınıf = 'md: sütundan sonra ara lg: kaçındıktan sonra ara' > Merhaba... < / P >
< P > Buraya Hoşgeldiniz... < / P >
< P > Tailwind CSS hakkında bilgi edinin... < / P >
< P > Bu bir CSS çerçevesidir ... < / P >
< P > Hoşçakal... < / P >
< / div >
< / vücut >
Burada:
- “ md:break-after-column ” sınıfı, “ sınıfındaki bu belirli
öğesinden sonra bir sütun sonu olması gerektiğini belirtir. md ” kesme noktası (orta ekran boyutu).
- “ lg:kaçındıktan sonra ara verme ” sınıfı, öğenin “ öğesinde ara vermekten kaçınması gerektiğini önerir. lg ” kesme noktası (büyük ekran boyutu).
2. Adım: Çıktıyı Doğrulayın
HTML web sayfasını görüntüleyerek kesme noktalarının ve ortam sorgularının uygulanıp uygulanmadığını doğrulayın:
Yukarıdaki web sayfasında orta ekranda belirtilen eleman üzerinde kolon kırılması meydana gelmiş, büyük ekranda kırılmanın önüne geçilmiştir.
Çözüm
Tailwind'de kesme noktaları ve medya sorguları ile 'sonradan' kullanmak için önce bir HTML dosyası oluşturun. Ardından, farklı ekran boyutları için farklı değerler ve stiller belirleyerek 'break-after' yardımcı programıyla kesme noktalarını ve medya sorgularını kullanın. Doğrulama için HTML programını çalıştırın ve web sayfasını görüntüleyin. Bu makale, Tailwind CSS'de kesme noktaları ve medya sorguları ile 'sonradan' kullanma yöntemini göstermiştir.