Tento článek demonstruje metodu, jak využít „přerušení“ s body přerušení a dotazy na média v Tailwind CSS.
Jak využít „přestávku“ s body přerušení a mediálními dotazy ve službě Tailwind?
Chcete-li použít „přerušení“ s body přerušení a dotazy na média, definujte různé hodnoty a styl pro různé velikosti obrazovky pomocí nástroje „přerušení“ v programu HTML. Poté ověřte výstup zobrazením webové stránky HTML.
Pojďme se podívat na praktickou implementaci:
Krok 1: Použijte body přerušení a dotazy na média pomocí nástroje „break-after“.
Vytvořte program HTML a určete různé hodnoty a styly pro různé velikosti obrazovky pomocí nástroje „break-after“. Použili jsme například „ md 'bod přerušení s ' přestávka po sloupci nástroj a nástroj lg 'bod přerušení s ' přestávka-po-vyhnout se ”utilita:
< tělo >
< div třída = 'columns-2 bg-teal-400' >
< p třída = 'md:break-after-column lg:break-after-aoid' > Ahoj... < / p >
< p > Vítej zde... < / p >
< p > Další informace o CSS Tailwind... < / p >
< p > Jedná se o CSS framework... < / p >
< p > Sbohem... < / p >
< / div >
< / tělo >
Tady:
- ' md:break-after-column ” označuje, že za tímto konkrétním prvkem
v „ md ” bod přerušení (střední velikost obrazovky).
- ' lg:break-after-aoid “ třída naznačuje, že prvek by se měl vyvarovat přerušení na „ lg ” bod přerušení (velká velikost obrazovky).
Krok 2: Ověřte výstup
Ověřte, zda byly použity body přerušení a dotazy na média zobrazením webové stránky HTML:
Na výše uvedené webové stránce došlo k zalomení sloupce na zadaném prvku na střední obrazovce a zalomení bylo zabráněno na velké obrazovce.
Závěr
Chcete-li v Tailwindu využít „přerušení“ s body přerušení a dotazy na média, nejprve vytvořte soubor HTML. Poté použijte body přerušení a dotazy na média s obslužným programem „break-after“ zadáním různých hodnot a stylů pro různé velikosti obrazovky. Pro ověření spusťte program HTML a zobrazte webovou stránku. Tento článek demonstroval metodu využití „přerušení“ s body přerušení a dotazy na média v Tailwind CSS.