Bu yazı, Tailwind CSS'de duyarlı kesme noktalarını kullanma yöntemini gösterecektir.
Tailwind'de Duyarlı Kesme Noktaları Nasıl Kullanılır?
Tailwind'de duyarlı kesme noktalarını kullanmak için, ' gibi duyarlı değiştiricileri kullanın. sm ”, “ md ”, “ lg ”, “ xl ' Ve ' 2xl ” HTML programındaki diğer sınıflarla birlikte. Ardından, kesme noktalarının düzgün çalıştığından emin olmak için HTML web sayfasını görüntüleyin ve ekran boyutunu değiştirin.
Adım 1: HTML Programında Duyarlı Değiştiriciler Kullanın
Bir HTML programı oluşturun ve duyarlı değiştiricileri istenen stilde kullanın. Örneğin, “ sm ”, “ md ”, “ lg ”, “ xl ' Ve ' 2xl ” duyarlı değiştiriciler:
< vücut >
< div sınıf = 'h-ekran bg-fuşya-400 sm:bg-pembe-600 md:bg-yeşil-700 lg:bg-mor-500 xl:bg-teal-600 2xl:bg-sarı-500' >
< h1 sınıf = 'text-7xl text-white text-center s-20' > Linux İpucu < / h1 >
< / div >
< / vücut >
Burada:
- “ bg-fuşya-400 ” sınıfı, sınıfın arka plan rengini ayarlar. fuşyaya.
- “ sm:bg-pembe-600 ” sınıfı, küçük ekranlar için arka plana pembe renk uygular.
- “ md:bg-yeşil-700 ” sınıfı, orta ekranlarda arka plan rengini yeşil olarak değiştirir.
- “ lg:bg-mor-50 ” sınıfı, büyük ekranlar için arka plan rengini mor olarak ayarlar.
- “ xl:bg-teal-600 ” sınıfı, ekstra geniş ekranlar için arka plana deniz mavisi rengi uygular.
- “ 2xl:bg-sarı-500 ” sınıfı, 2xl ekranlarda arka plan rengini sarı olarak değiştirir.
2. Adım: Çıktıyı Doğrulayın
Duyarlı kesme noktalarının düzgün çalışıp çalışmadığını doğrulamak için HTML web sayfasını görüntüleyin:
Yukarıdaki web sayfasında, web sayfasının renginin, kesme noktalarının belirtildiği ekran boyutuna göre değiştiği gözlemlenebilir.
Çözüm
Tailwind'de duyarlı kesme noktalarını kullanmak için, ' gibi duyarlı değiştiricileri kullanın. sm ”, “ md ”, “ lg ”, “ xl ' Ve ' 2xl ” HTML programındaki diğer sınıflarla birlikte. Bu değiştiriciler, ekran boyutuna bağlı olarak belirli bir öğeye farklı stiller uygulamak için kullanılır. Bu yazı, Tailwind CSS'de duyarlı kesme noktalarını kullanma yöntemini örneklemiştir.