Šajā rakstā ir sniegta procedūra minimālā augstuma un maksimālā augstuma piemērošanai Tailwind pārtraukumpunktiem un multivides vaicājumiem, izmantojot šādu izklāstu:
- Minimālā augstuma īpašuma iestatīšana aizmugurējā vēja pārtraukuma punktiem un multivides vaicājumiem
- Maksimālā augstuma rekvizīta iestatīšana tailwind pārtraukuma punktiem un multivides vaicājumiem
Kā iestatīt minimālā augstuma rekvizītu Tailwind pārtraukuma punktam un multivides vaicājumiem?
Tailwind nodrošina noklusējuma pārtraukuma punktus un multivides vaicājumus, lai dizains būtu pielāgots dažādiem ekrāna izmēriem. Pārtraukuma punktiem nodrošinātie rekvizīti tiek lietoti, kad tiek sasniegts norādītais ekrāna izmērs. Minimālais platums šiem noklusējuma pārtraukuma punktiem ir aprakstīts šādi:
- sm: Minimālais platums “640 pikseļi”.
- md: Minimālais platums “768 pikseļi”.
- lg: Minimālais platums “1024 pikseļi”.
- xl: Minimālais platums “1280 pikseļi”.
- 2xl: Minimālais platums “1536 pikseļi”.
Minimālais augstums nosaka elementa augstuma apakšējo robežu. Tas nozīmē, ka tas norāda minimālo augstumu, kāds elementam drīkst būt. Lai izmantotu rekvizītu min-height ar pārtraukumpunktiem programmā Tailwind, tiek izmantota šāda sintakse:
< div klasē = '{breakpoint prefix}:min-h-{value}...' > < / div >
Demonstrācijā izmantosim iepriekš definēto sintaksi, lai iegūtu labāku izpratni. Šajā piemērā elementa minimālā augstuma ierobežojums palielināsies uz ' md ” pārtraukuma punkts. Tā rezultātā palielināsies elementa kopējais augstums.
< div klasē = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Palieliniet ekrānu Izmērs lai palielinātu minimālo augstumu< / div >
Iepriekš minētā koda skaidrojums ir šāds:
- ' h-48 ” klase nodrošina div elementa augstumu 192 pikseļi.
- ' w-48 ” klase nodrošina div elementa augstumu 192 pikseļi.
- ' noapaļots-md ” klase nodrošina div elementa apaļo stūri.
- ' bg-{color}-{number} ” klase nodrošina norādīto krāsu elementa div fonam.
- ' teksta centrs ” klase novieto teksta elementu div elementa centrā.
- ' md:min-h-screen ” klase palielinās minimālā augstuma ierobežojumu, kas vienāds ar 100% ekrāna augstuma.
Izvade:
Izvadā var redzēt, ka tad, kad “ md ” ekrāna izmērs ir izpildīts, elements saņems 100% no ekrāna augstuma. Tas notiek tāpēc, ka minimālais augstuma ierobežojums “ md ” pārtraukuma punkts ir iestatīts vienāds ar ekrāna augstumu:
Kā iestatīt maksimālā augstuma rekvizītu Tailwind pārtraukuma punktam un multivides vaicājumiem?
Maksimālā augstuma klase nosaka Tailwind augstuma īpašuma augšējo robežu. Tas nozīmē, ka tas norāda maksimālo augstumu, kāds var būt elementam. Sintakse minimālās augstuma klases lietošanai ar pārtraukuma punktiem ir šāda:
< div klasē = '{breakpoint prefix}: max-h-{size}...' > < / div >Demonstrācijā izmantosim iepriekš definēto sintaksi, lai iegūtu labāku izpratni. Šajā piemērā elementam tiks nodrošināts īpašs maksimālā augstuma ierobežojums “ md ” pārtraukuma punkts. Tādējādi tiks samazināts elementam nodrošinātais noklusējuma augstums.
< div klasē = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' >Palieliniet ekrānu Izmērs lai palielinātu minimālo augstumu< / div >Ņemiet vērā, ka iepriekš minētajā kodā elementa noklusējuma augstums ir nodrošināts ar “h-96”, t.i., 384 pikseļi. Tomēr šis augstums samazinās līdz “240 pikseļiem”, kad tiek sasniegts “md” pārtraukuma punkts. Tas ir saistīts ar ' md:max-h-60 ” klase.
Izvade:
Zemāk redzamajā izvadē var skaidri redzēt, ka, tiklīdz ekrāna izmērs sasniedz ' md ” pārtraukuma punkts, elementa elementa augstums kļūst mazāks.
Tas viss attiecas uz minimālā un maksimālā augstuma rekvizīta iestatīšanu, izmantojot Tailwind pārtraukuma punktus.
Secinājums
Lai iestatītu maksimālā augstuma rekvizītu ar Tailwind pārtraukuma punktiem un multivides vaicājumiem, {pārtraukuma punkta prefikss}: max-h-{size} ” tiek izmantota klase. Līdzīgi, lai iestatītu minimālā augstuma rekvizītu ar Tailwind pārtraukuma punktiem, “ {pārtraukuma punkta prefikss}:min-h-{size} ” tiek izmantota klase. Šajā rakstā ir sniegta procedūra minimālā un maksimālā augstuma rekvizītu lietošanai pārtraukuma punktiem un multivides vaicājumiem programmā Tailwind.