Acest articol va oferi procedura de aplicare a înălțimii minime și a înălțimii maxime pentru punctele de întrerupere Tailwind și interogările media folosind următorul schiță:
- Setarea proprietății de înălțime minimă pentru punctele de întrerupere și interogări media
- Setarea proprietății de înălțime maximă pentru punctele de întrerupere și interogări media
Cum să setați proprietatea de înălțime minimă pe punctul de întrerupere Tailwind și interogări media?
Tailwind oferă puncte de întrerupere implicite și interogări media pentru a face designul receptiv pentru diferite dimensiuni de ecran. Proprietățile furnizate punctelor de întrerupere sunt aplicate atunci când dimensiunea specificată a ecranului este îndeplinită. Lățimea minimă pentru aceste puncte de întrerupere implicite este descrisă după cum urmează:
- sm: Lățimea minimă de „640px”.
- md: Lățimea minimă de „768px”.
- lg: Lățimea minimă de „1024px”.
- xl: Lățimea minimă de „1280px”.
- 2xl: Lățimea minimă de „1536px”.
Proprietatea min-height stabilește limita inferioară pentru înălțimea unui element. Aceasta înseamnă că specifică înălțimea minimă pe care un element este permis să o posede. Pentru a utiliza proprietatea min-height cu punctele de întrerupere în Tailwind, se folosește următoarea sintaxă:
< div clasă = „{prefix punct de întrerupere}:min-h-{valoare}...” > < / div >
Să folosim sintaxa definită mai sus într-o demonstrație pentru a înțelege mai bine. În acest exemplu, limita minimă de înălțime a elementului va crește pe „ md ” Punct de întrerupere. Acest lucru va duce la creșterea înălțimii totale a elementului.
< div clasă = „h-48 w-48 rotunjit-md bg-green-500 text-center md:min-h-screen” >Măriți ecranul mărimea pentru a crește înălțimea minimă< / div >
Explicația pentru codul de mai sus este următoarea:
- „ h-48 ” clasa oferă o înălțime de 192 px elementului div.
- „ w-48 ” clasa oferă o înălțime de 192 px elementului div.
- „ rotunjit-md ” clasa oferă colțul rotunjit elementului div.
- „ bg-{culoare}-{număr} ” clasa oferă culoarea specificată pentru fundalul elementului div.
- „ centru de text ” clasa poziționează elementul text în centrul elementului div.
- „ md:min-h-ecran ” clasa va crește limita minimă de înălțime egală cu 100% înălțimea ecranului.
Ieșire:
Se poate vedea în ieșire că atunci când „ md ” dimensiunea ecranului este îndeplinită, elementul va obține 100% din înălțimea ecranului. Acest lucru se întâmplă deoarece limita minimă de înălțime pentru „ md ” punctul de întrerupere este setat egal cu înălțimea ecranului:
Cum să setați proprietatea de înălțime maximă pentru punctul de întrerupere Tailwind și interogări media?
Clasa de înălțime maximă stabilește limita superioară pentru proprietatea înălțime în Tailwind. Aceasta înseamnă că specifică înălțimea maximă pe care o poate avea un element. Sintaxa pentru utilizarea clasei de înălțime minimă cu puncte de întrerupere este următoarea:
< div clasă = „{prefix punct de întrerupere}:max-h-{dimensiune}...” > < / div >Să folosim sintaxa definită mai sus într-o demonstrație pentru a înțelege mai bine. În acest exemplu, elementul va fi prevăzut cu o limită de înălțime maximă specifică pentru „ md ” Punct de întrerupere. Acest lucru va restrânge înălțimea implicită furnizată elementului.
< div clasă = „h-96 w-48 rotunjit-md bg-green-500 text-center md:max-h-60” >Măriți ecranul mărimea pentru a crește înălțimea minimă< / div >Rețineți că în codul de mai sus, înălțimea implicită a unui element este furnizată cu „h-96”, adică 384px. Cu toate acestea, această înălțime se îngustează la „240px” atunci când este îndeplinit punctul de întrerupere „md”. Acest lucru se datorează „ md:max-h-60 ” clasa.
Ieșire:
În rezultatul de mai jos, se poate vedea clar că odată ce dimensiunea ecranului atinge „ md ” punct de întrerupere, înălțimea elementului devine mai mică.
Este vorba despre setarea proprietății de înălțime minimă și maximă cu punctele de întrerupere Tailwind.
Concluzie
Pentru a seta proprietatea înălțimii maxime cu punctele de întrerupere Tailwind și interogările media, „ {prefix punct de întrerupere}:max-h-{size} ” se folosește clasa. În mod similar, pentru a seta proprietatea înălțimii minime cu punctele de întrerupere Tailwind, „ {prefix punct de întrerupere}:min-h-{size} ” se folosește clasa. Acest articol a furnizat procedura de aplicare a proprietăților de înălțime minimă și maximă la punctele de întrerupere și interogările media în Tailwind.