Tento článek poskytuje postup pro použití minimální výšky a maximální výšky na zarážky Tailwind a dotazy na média pomocí následující osnovy:
- Nastavení vlastnosti minimální výšky u zarážek Tailwind a mediálních dotazů
- Nastavení vlastnosti maximální výšky pro zarážky Tailwind a dotazy na média
Jak nastavit vlastnost minimální výšky u Breakpoint a mediálních dotazů Tailwind?
Tailwind poskytuje výchozí body přerušení a dotazy na média, aby návrh reagoval na různé velikosti obrazovky. Vlastnosti poskytnuté pro zarážky se použijí, když je splněna zadaná velikost obrazovky. Minimální šířka pro tyto výchozí body přerušení je popsána následovně:
- sm: Minimální šířka „640 pixelů“.
- md: Minimální šířka „768 pixelů“.
- lg: Minimální šířka „1024px“.
- xl: Minimální šířka „1280px“.
- 2xl: Minimální šířka „1536px“.
Vlastnost min-height nastavuje spodní limit pro výšku prvku. To znamená, že určuje minimální výšku, kterou může prvek mít. Chcete-li použít vlastnost min-height s body přerušení v Tailwindu, použije se následující syntaxe:
< div třída = '{předpona bodu přerušení}:min-h-{value}...' > < / div >
Použijme výše definovanou syntaxi v demonstraci, abychom lépe porozuměli. V tomto příkladu se minimální výškový limit pro prvek zvýší na „ md “bod zlomu. To povede ke zvýšení celkové výšky prvku.
< div třída = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Zvětšete obrazovku Velikost zvýšit minimální výšku< / div >
Vysvětlení výše uvedeného kódu je následující:
- ' h-48 ” poskytuje elementu div výšku 192px.
- ' w-48 ” poskytuje elementu div výšku 192px.
- ' zaoblené-md ” class poskytuje kulatý roh prvku div.
- ' bg-{barva}-{číslo} ” poskytuje specifikovanou barvu pozadí prvku div.
- ' textové centrum Třída ” umístí textový prvek do středu prvku div.
- ' md:min-h-screen ” třída zvýší minimální limit výšky rovnající se 100 % výšky obrazovky.
Výstup:
Na výstupu je vidět, že když „ md ” je splněna velikost obrazovky, prvek získá 100 % výšky obrazovky. To se děje proto, že minimální výškový limit pro „ md ” bod přerušení je nastaven na výšku obrazovky:
Jak nastavit vlastnost Max-height pro Tailwind Breakpoint & Media Queries?
Třída maximální výšky nastavuje horní limit pro vlastnost height v Tailwindu. To znamená, že určuje maximální výšku, kterou může prvek mít. Syntaxe pro použití třídy minimální výšky s body přerušení je následující:
< div třída = '{předpona bodu přerušení}:max-h-{velikost}...' > < / div >Použijme výše definovanou syntaxi v demonstraci, abychom lépe porozuměli. V tomto příkladu bude prvek opatřen specifickým limitem maximální výšky pro „ md “bod zlomu. Tím se zúží výchozí výška poskytnutá prvku.
< div třída = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' >Zvětšete obrazovku Velikost zvýšit minimální výšku< / div >Všimněte si, že ve výše uvedeném kódu je výchozí výška prvku opatřena „h-96“, tj. 384 pixelů. Tato výška se však zúží na „240 pixelů“, když je splněna zarážka „md“. To je způsobeno tím, že „ md:max-h-60 “třída.
Výstup:
V níže uvedeném výstupu je jasně vidět, že jakmile velikost obrazovky dosáhne „ md ” breakpoint, výška prvku se zmenší.
To je vše o nastavení vlastnosti minimální a maximální výšky pomocí bodů přerušení Tailwind.
Závěr
Chcete-li nastavit vlastnost maximální výšky pomocí bodů přerušení Tailwind a dotazů na média, „ {předpona bodu přerušení}:max-h-{velikost} ” se používá třída. Podobně, chcete-li nastavit vlastnost minimální výšky s body přerušení Tailwind, „ {předpona bodu přerušení}:min-h-{velikost} ” se používá třída. Tento článek poskytuje postup pro použití vlastností min a max-height na zarážky a dotazy na média ve službě Tailwind.