W tym artykule opisano procedurę stosowania minimalnej i maksymalnej wysokości w punktach przerwania Tailwind i zapytaniach o media, korzystając z następującego schematu:
- Ustawianie właściwości Min-height w punktach przerwania Tailwind i zapytaniach o media
- Ustawianie właściwości maksymalnej wysokości w punktach przerwania Tailwind i zapytaniach o media
Jak ustawić właściwość Min-height w punkcie przerwania Tailwind i zapytaniach o media?
Tailwind zapewnia domyślne punkty przerwania i zapytania o media, dzięki którym projekt jest responsywny dla różnych rozmiarów ekranów. Właściwości dostarczone do punktów przerwania są stosowane po osiągnięciu określonego rozmiaru ekranu. Minimalna szerokość tych domyślnych punktów przerwania jest opisana w następujący sposób:
- sm: Minimalna szerokość „640px”.
- md: Minimalna szerokość „768px”.
- LG: Minimalna szerokość „1024px”.
- XL: Minimalna szerokość „1280px”.
- 2XL: Minimalna szerokość „1536px”.
Właściwość min-height ustawia dolną granicę wysokości elementu. Oznacza to, że określa minimalną wysokość, jaką może posiadać element. Aby użyć właściwości min-height z punktami przerwania w Tailwind, używana jest następująca składnia:
< div klasa = „{przedrostek punktu przerwania}:min-h-{wartość}…” > < / div >
Użyjmy wyżej zdefiniowanej składni w demonstracji, aby lepiej zrozumieć. W tym przykładzie minimalny limit wysokości elementu wzrośnie na „ md „punkt przerwania. Spowoduje to zwiększenie całkowitej wysokości elementu.
< div klasa = „h-48 w-48 zaokrąglony-md bg-green-500 centrum tekstowe md:min-h-screen” > Zwiększ ekran Rozmiar aby zwiększyć minimalną wysokość< / div >
Wyjaśnienie powyższego kodu jest następujące:
- „ h-48 ” class zapewnia elementowi div wysokość 192px.
- „ w-48 ” class zapewnia elementowi div wysokość 192 pikseli.
- „ zaokrąglone-md ” class zapewnia zaokrąglony róg elementu div.
- „ bg-{kolor}-{liczba} ” klasa zapewnia określony kolor tła elementu div.
- „ centrum tekstowe ” class umieszcza element tekstowy na środku elementu div.
- „ md:min-h-screen ” zwiększy minimalny limit wysokości równy 100% wysokości ekranu.
Wyjście:
Na wynikach widać, że gdy „ md ” rozmiar ekranu zostanie spełniony, element otrzyma 100% wysokości ekranu. Dzieje się tak, ponieważ minimalny limit wysokości dla „ md ” punkt przerwania jest ustawiony na wysokość ekranu:
Jak ustawić właściwość maksymalnej wysokości w punkcie przerwania Tailwind i zapytaniach o media?
Klasa maksymalnej wysokości ustawia górny limit właściwości height w Tailwind. Oznacza to, że określa maksymalną wysokość, jaką może posiadać element. Składnia używania klasy minimalnej wysokości z punktami przerwania jest następująca:
< div klasa = „{przedrostek punktu przerwania}:max-h-{rozmiar}…” > < / div >Użyjmy wyżej zdefiniowanej składni w demonstracji, aby lepiej zrozumieć. W tym przykładzie element będzie miał określony limit maksymalnej wysokości dla „ md „punkt przerwania. Spowoduje to zawężenie domyślnej wysokości podanej dla elementu.
< div klasa = „h-96 w-48 zaokrąglony-md bg-green-500 centrum tekstowe md:max-h-60” > Zwiększ ekran Rozmiar aby zwiększyć minimalną wysokość< / div >Należy pamiętać, że w powyższym kodzie domyślna wysokość elementu to „h-96”, czyli 384px. Jednak wysokość ta zawęża się do „240 pikseli”, gdy osiągnięty zostanie punkt przerwania „md”. Wynika to z „ md:max-h-60 ' klasa.
Wyjście:
Na poniższym wyjściu wyraźnie widać, że gdy rozmiar ekranu osiągnie „ md ” punktu przerwania, wysokość elementu zmniejsza się.
Chodzi o ustawienie właściwości minimalnej i maksymalnej wysokości za pomocą punktów przerwania Tailwind.
Wniosek
Aby ustawić właściwość maksymalnej wysokości za pomocą punktów przerwania Tailwind i zapytań o media, należy użyć parametru „ {przedrostek punktu przerwania}:max-h-{rozmiar} używana jest klasa ”. Podobnie, aby ustawić właściwość minimalnej wysokości za pomocą punktów przerwania Tailwind, należy użyć parametru „ {przedrostek punktu przerwania}:min-h-{rozmiar} używana jest klasa ”. W tym artykule opisano procedurę stosowania właściwości minimalnej i maksymalnej wysokości do punktów przerwania i zapytań o media w Tailwind.