Tämä artikkeli sisältää menettelyn vähimmäis- ja enimmäiskorkeuden käyttämiseksi Tailwind-katkaisupisteissä ja mediakyselyissä seuraavan kaavan mukaan:
- Minimikorkeusominaisuuden asettaminen myötätuulen keskeytyspisteille ja mediakyselyille
- Max-height-ominaisuuden asettaminen tailwind-katkaisupisteille ja mediakyselyille
Kuinka asettaa vähimmäiskorkeusominaisuus Tailwind Breakpoint- ja mediakyselyille?
Tailwind tarjoaa oletusarvoisia keskeytyspisteitä ja mediakyselyjä, joiden avulla suunnittelusta tulee reagoiva eri näyttökokoille. Katkaisupisteille tarjottuja ominaisuuksia käytetään, kun määritetty näytön koko täyttyy. Näiden oletuskatkaisupisteiden vähimmäisleveys on kuvattu seuraavasti:
- sm: Minimileveys '640px'.
- md: Minimileveys '768px'.
- lg: Minimileveys '1024px'.
- xl: Minimileveys '1280px'.
- 2xl: Minimileveys '1536px'.
Min-height-ominaisuus asettaa elementin korkeuden alarajan. Tämä tarkoittaa, että se määrittää vähimmäiskorkeuden, jonka elementillä saa olla. Min-height-ominaisuuden käyttämiseksi Tailwindin keskeytyspisteiden kanssa käytetään seuraavaa syntaksia:
< div luokkaa = '{breakpoint prefix}:min-h-{value}...' > < / div >
Käytetään yllä määriteltyä syntaksia esittelyssä saadaksemme paremman käsityksen. Tässä esimerkissä elementin vähimmäiskorkeusraja kasvaa ' md ”katkospiste. Tämä lisää elementin kokonaiskorkeutta.
< div luokkaa = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' > Suurenna näyttöä Koko nostaa vähimmäiskorkeutta< / div >
Selitys yllä olevalle koodille on seuraava:
- ' h-48 ” luokka tarjoaa div-elementille korkeuden 192px.
- ' w-48 ” luokka tarjoaa div-elementille korkeuden 192px.
- ' pyöristetty-md ”-luokka tarjoaa pyöreän kulman div-elementille.
- ' bg-{väri}-{numero} ” luokka tarjoaa määritetyn värin div-elementin taustalle.
- ' tekstikeskus ” luokka sijoittaa tekstielementin div-elementin keskelle.
- ' md:min-h-näyttö ” luokka nostaa vähimmäiskorkeusrajan, joka vastaa 100 % näytön korkeutta.
Lähtö:
Tuloksesta voidaan nähdä, että kun ' md ” näytön koko täyttyy, elementti saa 100 % näytön korkeudesta. Tämä johtuu siitä, että ' md ” keskeytyspiste asetetaan yhtä suureksi kuin näytön korkeus:
Kuinka asettaa enimmäiskorkeusominaisuus Tailwind Breakpoint- ja mediakyselyille?
Maksimikorkeusluokka asettaa korkeusominaisuuden ylärajan Tailwindissä. Tämä tarkoittaa, että se määrittää enimmäiskorkeuden, jonka elementti voi omistaa. Syntaksi vähimmäiskorkeusluokan käyttämiselle keskeytyspisteiden kanssa on seuraava:
< div luokkaa = '{breakpoint prefix}:max-h-{size}...' > < / div >Käytetään yllä määriteltyä syntaksia esittelyssä saadaksemme paremman käsityksen. Tässä esimerkissä elementille annetaan tietty enimmäiskorkeusraja ' md ”katkospiste. Tämä kaventaa elementille annettua oletuskorkeutta.
< div luokkaa = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' > Suurenna näyttöä Koko nostaa vähimmäiskorkeutta< / div >Huomaa, että yllä olevassa koodissa elementin oletuskorkeus on 'h-96' eli 384px. Tämä korkeus kuitenkin kapenee '240 pikseliin', kun 'md'-katkaisupiste saavutetaan. Tämä johtuu siitä, että ' md:max-h-60 ”luokka.
Lähtö:
Alla olevassa tulosteessa on selvästi nähtävissä, että kun näytön koko saavuttaa ' md ” murtopiste, elementin elementin korkeus pienenee.
Siinä on kyse vähimmäis- ja enimmäiskorkeusominaisuuden asettamisesta Tailwind-katkaisupisteillä.
Johtopäätös
Jos haluat määrittää maksimikorkeuden ominaisuuden Tailwind-katkaisupisteillä ja mediakyselyillä, ' {katkopisteen etuliite}:max-h-{size} ” luokkaa käytetään. Samoin, jos haluat asettaa vähimmäiskorkeusominaisuuden Tailwind-katkaisupisteillä, ' {katkopisteen etuliite}:min-h-{size} ” luokkaa käytetään. Tämä artikkeli on tarjonnut menettelyn min- ja max-height-ominaisuuksien soveltamiseksi keskeytyskohtiin ja mediakyselyihin Tailwindissä.