Tento článok poskytuje postup na použitie minimálnej a maximálnej výšky v bodoch prerušenia Tailwind a mediálnych dopytoch pomocou nasledujúceho prehľadu:
- Nastavenie vlastnosti minimálnej výšky v bodoch zlomu a mediálnych dopytoch Tailwind
- Nastavenie vlastnosti maximálnej výšky v bodoch zlomu a mediálnych dopytoch Tailwind
Ako nastaviť vlastnosť minimálnej výšky pre bod zlomu a mediálne dopyty Tailwind?
Tailwind poskytuje predvolené body prerušenia a mediálne dopyty, aby dizajn reagoval na rôzne veľkosti obrazovky. Vlastnosti poskytnuté bodom prerušenia sa použijú, keď je splnená špecifikovaná veľkosť obrazovky. Minimálna šírka pre tieto predvolené body prerušenia je opísaná takto:
- sm: Minimálna šírka „640 pixelov“.
- md: Minimálna šírka „768 pixelov“.
- lg: Minimálna šírka „1024px“.
- xl: Minimálna šírka „1280px“.
- 2xl: Minimálna šírka „1 536 pixelov“.
Vlastnosť min-height nastavuje dolnú hranicu výšky prvku. To znamená, že určuje minimálnu výšku, ktorú môže prvok mať. Ak chcete použiť vlastnosť min-height s bodmi prerušenia v Tailwinde, použije sa nasledujúca syntax:
< div trieda = '{predpona bodu zlomu}:min-h-{hodnota}...' > < / div >
Použime vyššie definovanú syntax v demonštrácii, aby sme lepšie porozumeli. V tomto príklade sa minimálny výškový limit pre prvok zvýši na „ md “bod zlomu. To bude mať za následok zvýšenie celkovej výšky prvku.
< div trieda = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Zväčšiť obrazovku Veľkosť na zvýšenie minimálnej výšky< / div >
Vysvetlenie vyššie uvedeného kódu je nasledovné:
- ' h-48 ” poskytuje elementu div výšku 192px.
- ' w-48 ” poskytuje elementu div výšku 192px.
- ' zaoblené-md ” poskytuje okrúhly roh prvku div.
- ' bg-{color}-{number} ” poskytuje špecifikovanú farbu pozadia prvku div.
- ' textové centrum ” umiestni textový prvok do stredu prvku div.
- ' md:min-h-screen ” trieda zvýši minimálnu výšku na 100 % výšky obrazovky.
Výkon:
Na výstupe je vidieť, že keď „ md ” je splnená veľkosť obrazovky, prvok získa 100 % výšky obrazovky. Stáva sa to preto, že minimálny výškový limit pre „ md ” bod prerušenia je nastavený na výšku obrazovky:
Ako nastaviť vlastnosť maximálnej výšky pre bod zlomu a mediálne dopyty Tailwind?
Trieda maximálnej výšky nastavuje horný limit pre vlastnosť výšky v Tailwinde. To znamená, že určuje maximálnu výšku, ktorú môže mať prvok. Syntax na použitie triedy minimálnej výšky s bodmi prerušenia je nasledovná:
< div trieda = '{predpona bodu zlomu}:max-h-{veľkosť}...' > < / div >Použime vyššie definovanú syntax v demonštrácii, aby sme lepšie porozumeli. V tomto príklade bude prvku poskytnutý špecifický limit maximálnej výšky pre „ md “bod zlomu. Tým sa zúži predvolená výška poskytnutá prvku.
< div trieda = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' >Zväčšiť obrazovku Veľkosť na zvýšenie minimálnej výšky< / div >Všimnite si, že vo vyššie uvedenom kóde je predvolená výška prvku uvedená s „h-96“, t. j. 384 pixelov. Táto výška sa však zužuje na „240 pixelov“, keď je splnený bod prerušenia „md“. Je to spôsobené tým, že „ md:max-h-60 ' trieda.
Výkon:
V nižšie uvedenom výstupe je jasne vidieť, že keď veľkosť obrazovky dosiahne „ md ” breakpoint, výška elementu sa zmenší.
To je všetko o nastavení vlastnosti minimálnej a maximálnej výšky pomocou bodov prerušenia Tailwind.
Záver
Ak chcete nastaviť vlastnosť maximálnej výšky pomocou bodov prerušenia Tailwind a mediálnych dopytov, „ {predpona bodu zlomu}:max-h-{veľkosť} ” používa sa trieda. Podobne, ak chcete nastaviť vlastnosť minimálnej výšky s bodmi prerušenia Tailwind, „ {predpona bodu zlomu}:min-h-{veľkosť} ” používa sa trieda. Tento článok poskytuje postup na použitie vlastností min a max-height na body prerušenia a mediálne dotazy v Tailwinde.