Bu makale, aşağıdaki taslağı kullanarak Tailwind kesme noktalarına ve medya sorgularına minimum yükseklik ve maksimum yükseklik uygulama prosedürünü sağlayacaktır:
- Arka Rüzgar Kesme Noktalarında ve Medya Sorgularında Minimum Yükseklik Özelliğini Ayarlama
- Arka Rüzgar Kesme Noktalarında ve Medya Sorgularında Maksimum Yükseklik Özelliğini Ayarlama
Arka Rüzgar Kırılma Noktası ve Medya Sorgularında Minimum Yükseklik Özelliği Nasıl Ayarlanır?
Tailwind, tasarımın farklı ekran boyutlarına duyarlı olmasını sağlamak için varsayılan kesme noktaları ve medya sorguları sağlar. Kesme noktalarına sağlanan özellikler, belirtilen ekran boyutu karşılandığında uygulanır. Bu varsayılan kesme noktaları için minimum genişlik şu şekilde açıklanmaktadır:
- sm: Minimum genişlik “640px”.
- MD: Minimum genişlik “768px”.
- lg: Minimum genişlik “1024px”.
- xl: Minimum genişlik “1280px”.
- 2xl: Minimum genişlik “1536px”.
Min-height özelliği, bir elemanın yüksekliğinin alt sınırını belirler. Bu, bir elemanın sahip olmasına izin verilen minimum yüksekliği belirttiği anlamına gelir. Min-height özelliğini Tailwind'deki kesme noktalarıyla kullanmak için aşağıdaki sözdizimi kullanılır:
< div sınıf = '{breakpoint prefix}:min-h-{value}...' > < / div >
Daha iyi anlamak için yukarıda tanımlanan sözdizimini bir gösteride kullanalım. Bu örnekte elemanın minimum yükseklik sınırı “ MD ” kesme noktası. Bu, elemanın toplam yüksekliğinin artmasına neden olacaktır.
< div sınıf = 'h-48 w-48 yuvarlak-md bg-yeşil-500 metin merkezi md:min-h-ekran' >Ekranı Artır Boyut Minimum yüksekliği artırmak için< / div >
Yukarıdaki kodun açıklaması şu şekildedir:
- “ h-48 ” sınıfı div elemanına 192 piksellik bir yükseklik sağlar.
- “ w-48 ” sınıfı div elemanına 192 piksellik bir yükseklik sağlar.
- “ yuvarlak-md ” sınıfı div elemanına yuvarlak köşe sağlar.
- “ bg-{renk}-{sayı} ” sınıfı, div öğesinin arka planına belirtilen rengi sağlar.
- “ metin merkezi ” sınıfı, metin öğesini div öğesinin merkezine konumlandırır.
- “ md:min-h-ekran ” sınıfı minimum yükseklik sınırını %100 ekran yüksekliğine eşit artıracaktır.
Çıktı:
Çıktıda görüldüğü gibi, “ MD ” ekran boyutu karşılanırsa öğe ekran yüksekliğinin %100'ünü alır. Bunun nedeni, ' MD ” kesme noktası ekran yüksekliğine eşit olarak ayarlanır:
Arka Rüzgar Kırılma Noktası ve Medya Sorgularında Maksimum Yükseklik Özelliği Nasıl Ayarlanır?
Maksimum yükseklik sınıfı, Tailwind'deki yükseklik özelliğinin üst sınırını belirler. Bu, bir elemanın sahip olabileceği maksimum yüksekliği belirttiği anlamına gelir. Minimum yükseklik sınıfını kesme noktalarıyla kullanmanın sözdizimi aşağıdaki gibidir:
< div sınıf = '{breakpoint prefix}:max-h-{size}...' > < / div >Daha iyi anlamak için yukarıda tanımlanan sözdizimini bir gösteride kullanalım. Bu örnekte, elemana belirli bir maksimum yükseklik sınırı sağlanacaktır. MD ” kesme noktası. Bu, öğeye sağlanan varsayılan yüksekliği daraltacaktır.
< div sınıf = 'h-96 w-48 yuvarlak-md bg-yeşil-500 metin merkezi md:max-h-60' >Ekranı Artır Boyut Minimum yüksekliği artırmak için< / div >Yukarıdaki kodda, bir öğenin varsayılan yüksekliğinin “h-96” yani 384 piksel ile sağlandığını unutmayın. Ancak “md” kesme noktasına ulaşıldığında bu yükseklik “240px”e kadar daralıyor. Bunun nedeni “ md:max-h-60 ' sınıf.
Çıktı:
Aşağıdaki çıktıda ekran boyutu “” değerine ulaştığında açıkça görülebilmektedir. MD ” kesme noktası, elemanın eleman yüksekliği küçülür.
Bu tamamen Tailwind kesme noktalarıyla minimum ve maksimum yükseklik özelliğini ayarlamakla ilgilidir.
Çözüm
Tailwind kesme noktaları ve medya sorgularıyla maksimum yükseklik özelliğini ayarlamak için ' {breakpoint prefix}:max-h-{size} ” sınıfı kullanılıyor. Benzer şekilde, Minimum yükseklik özelliğini Arka Rüzgar kesme noktalarıyla ayarlamak için ' {kırılma noktası öneki}:min-h-{boyut} ” sınıfı kullanılıyor. Bu makalede, Tailwind'deki kesme noktalarına ve medya sorgularına minimum ve maksimum yükseklik özelliklerini uygulama yordamı sağlanmıştır.