Šiame straipsnyje bus pateikta minimalaus aukščio ir didžiausio aukščio taikymo Tailwind lūžio taškams ir medijos užklausoms procedūra, naudojant toliau pateiktą schemą:
- Minimalaus aukščio ypatybės nustatymas tailwind lūžio taškams ir medijos užklausoms
- Didžiausio aukščio ypatybės nustatymas tailwind lūžio taškams ir medijos užklausoms
Kaip nustatyti minimalaus aukščio ypatybę „Tailwind Breakpoint“ ir medijos užklausoms?
Tailwind pateikia numatytuosius lūžio taškus ir medijos užklausas, kad dizainas atitiktų skirtingus ekrano dydžius. Pertraukos taškams pateiktos savybės taikomos, kai pasiekiamas nurodytas ekrano dydis. Mažiausias šių numatytųjų pertraukos taškų plotis aprašytas taip:
- sm: Mažiausias plotis „640 pikselių“.
- md: Mažiausias plotis „768 pikseliai“.
- lg: Mažiausias plotis „1024 pikseliai“.
- xl: Mažiausias plotis „1280 pikselių“.
- 2xl: Mažiausias plotis „1536 pikseliai“.
Ypatybė min-height nustato apatinę elemento aukščio ribą. Tai reiškia, kad jis nurodo minimalų aukštį, kurį elementas gali turėti. Norint naudoti ypatybę min-height su lūžio taškais programoje Tailwind, naudojama ši sintaksė:
< div klasė = '{lūžio taško priešdėlis}:min-h-{value}...' > < / div >
Norėdami geriau suprasti, demonstracijoje naudokime aukščiau apibrėžtą sintaksę. Šiame pavyzdyje minimalus elemento aukščio limitas padidės „ md “ lūžio taškas. Dėl to padidės bendras elemento aukštis.
< div klasė = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Padidinkite ekraną Dydis Padidinti minimalų aukštį< / div >
Aukščiau pateikto kodo paaiškinimas yra toks:
- „ h-48 “ klasė suteikia 192 pikselių aukštį div elementui.
- „ w-48 “ klasė suteikia 192 pikselių aukštį div elementui.
- „ suapvalintas-md “ klasė suteikia apvalų kampą elementui div.
- „ bg-{color}-{number} “ klasė suteikia nurodytą spalvą div elemento fonui.
- „ teksto centras “ klasė išdėsto teksto elementą div elemento centre.
- „ md:min-h-screen ” klasė padidins minimalų aukščio ribą, lygią 100 % ekrano aukščio.
Išvestis:
Išvestyje matyti, kad kai „ md “ ekrano dydis atitinka, elementas gaus 100% ekrano aukščio. Taip nutinka dėl to, kad minimalus aukščio apribojimas md ” lūžio taškas yra lygus ekrano aukščiui:
Kaip nustatyti maksimalaus aukščio ypatybę tailwind lūžio taško ir medijos užklausose?
Didžiausia aukščio klasė nustato viršutinę aukščio ypatybės ribą Tailwind. Tai reiškia, kad jis nurodo maksimalų aukštį, kurį gali turėti elementas. Minimalaus aukščio klasės su lūžio taškais naudojimo sintaksė yra tokia:
< div klasė = '{breakpoint prefix}:max-h-{size}...' > < / div >Norėdami geriau suprasti, demonstracijoje naudokime aukščiau apibrėžtą sintaksę. Šiame pavyzdyje elementui bus suteikta konkreti didžiausio aukščio riba „ md “ lūžio taškas. Tai sumažins numatytąjį elemento aukštį.
< div klasė = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' >Padidinkite ekraną Dydis Padidinti minimalų aukštį< / div >Atminkite, kad aukščiau pateiktame kode numatytasis elemento aukštis pateikiamas „h-96“, t. y. 384 pikseliai. Tačiau šis aukštis susiaurėja iki „240 pikselių“, kai pasiekiamas „md“ lūžio taškas. Taip yra dėl „ md:max-h-60 ' klasė.
Išvestis:
Toliau pateiktoje išvestyje aiškiai matyti, kad ekrano dydžiui pasiekus „ md ” lūžio taškas, elemento aukštis sumažėja.
Tai viskas apie minimalaus ir didžiausio aukščio ypatybių nustatymą naudojant Tailwind lūžio taškus.
Išvada
Norėdami nustatyti maksimalaus aukščio ypatybę su Tailwind lūžio taškais ir medijos užklausomis, „ {lūžio taško priešdėlis}:maks.-h-{dydis} “ naudojama klasė. Panašiai, norėdami nustatyti minimalaus aukščio ypatybę su Tailwind lūžio taškais, „ {lūžio taško priešdėlis}:min-h-{size} “ naudojama klasė. Šiame straipsnyje pateikta minimalaus ir didžiausio aukščio savybių taikymo lūžio taškams ir medijos užklausoms „Tailwind“ procedūra.