Ez a cikk bemutatja a minimális magasság és a maximális magasság alkalmazásának eljárását Tailwind töréspontokra és médialekérdezésekre az alábbi vázlat segítségével:
- Minimális magasság tulajdonság beállítása hátszél töréspontokhoz és médialekérdezésekhez
- Max-height tulajdonság beállítása a hátszél töréspontjaihoz és a médialekérdezésekhez
Hogyan állítsunk be minimális magasságot a hátszél töréspontjaihoz és a médialekérdezésekhez?
A Tailwind alapértelmezett töréspontokat és médialekérdezéseket biztosít annak érdekében, hogy a tervezés érzékeny legyen a különböző képernyőméretekre. A töréspontokhoz megadott tulajdonságok akkor kerülnek alkalmazásra, ha teljesül a megadott képernyőméret. Az alapértelmezett töréspontok minimális szélességének leírása a következő:
- sm: Minimális szélesség „640 képpont”.
- md: Minimális szélesség „768px”.
- lg: Minimális szélesség „1024 képpont”.
- xl: Minimális szélesség „1280 képpont”.
- 2xl: Minimális szélesség „1536 képpont”.
A min-height tulajdonság egy elem magasságának alsó határát állítja be. Ez azt jelenti, hogy megadja azt a minimális magasságot, amellyel egy elem rendelkezhet. A min-height tulajdonságnak a Tailwind töréspontjaival való használatához a következő szintaxist kell használni:
< div osztály = '{töréspont előtag}:min-ó-{érték}...' > < / div >
Használjuk a fent meghatározott szintaxist egy demonstrációban, hogy jobban megértsük. Ebben a példában az elem minimális magassági korlátja a „ md ” töréspont. Ez növeli az elem teljes magasságát.
< div osztály = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Növelje a Képernyőt Méret a minimális magasság növelésére< / div >
A fenti kód magyarázata a következő:
- A ' h-48 ” osztály 192 képpont magasságot biztosít a div elemnek.
- A ' w-48 ” osztály 192 képpont magasságot biztosít a div elemnek.
- A ' lekerekített-md ” osztály biztosítja a div elem kerek sarkát.
- A ' bg-{color}-{number} ” osztály biztosítja a megadott színt a div elem hátterének.
- A ' szövegközpont ” osztály a szövegelemet a div elem közepére helyezi.
- A ' md:min-h-screen ” osztály a képernyő magasságának 100%-ára növeli a minimális magassághatárt.
Kimenet:
A kimeneten látható, hogy amikor a „ md ” képernyőméret elérésekor az elem a képernyő magasságának 100%-át kapja. Ez azért történik, mert a minimális magasságkorlát a ' md ” töréspont a képernyő magasságával egyenlő:
Hogyan állítható be a maximális magasság tulajdonság a hátszél töréspontjaihoz és a médialekérdezésekhez?
A maximális magassági osztály határozza meg a Tailwind magassági tulajdonságának felső határát. Ez azt jelenti, hogy meghatározza azt a maximális magasságot, amellyel egy elem rendelkezhet. A minimális magasságosztály töréspontokkal való használatának szintaxisa a következő:
< div osztály = '{töréspont előtag}:max-h-{size}...' > < / div >Használjuk a fent meghatározott szintaxist egy demonstrációban, hogy jobban megértsük. Ebben a példában az elem egy meghatározott maximális magassági korláttal lesz ellátva a „ md ” töréspont. Ez leszűkíti az elem alapértelmezett magasságát.
< div osztály = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' >Növelje a Képernyőt Méret a minimális magasság növelésére< / div >Vegye figyelembe, hogy a fenti kódban egy elem alapértelmezett magassága „h-96”, azaz 384 képpont. Ez a magasság azonban „240 képpontra” szűkül, ha az „md” töréspont teljesül. Ez annak köszönhető, hogy ' md:max-h-60 ' osztály.
Kimenet:
Az alábbi kimeneten jól látható, hogy ha a képernyő mérete eléri a „ md ” töréspont, az elem elemmagassága kisebb lesz.
Ez a minimális és maximális magasság tulajdonság beállításáról szól a Tailwind töréspontokkal.
Következtetés
A maximális magasság tulajdonság beállításához a Tailwind töréspontokkal és médialekérdezésekkel, a „ {töréspont előtag}:max-h-{size} ” osztályt használják. Hasonlóképpen a minimális magasság tulajdonság beállításához a Tailwind töréspontokkal, a „ {töréspont előtag}:perc-ó-{méret} ” osztályt használják. Ez a cikk bemutatja a minimális és maximális magasság tulajdonságok töréspontokra és médialekérdezésekre való alkalmazását a Tailwindben.