Tento článok demonštruje spôsob využitia „prerušenia“ s bodmi prerušenia a mediálnymi dopytmi v CSS Tailwind.
Ako využiť „prestávky“ s bodmi prerušenia a mediálnymi dopytmi v Tailwinde?
Ak chcete použiť „break-after“ s bodmi prerušenia a mediálnymi dopytmi, definujte rôzne hodnoty a štýly pre rôzne veľkosti obrazovky pomocou pomôcky „break-after“ v programe HTML. Potom overte výstup zobrazením webovej stránky HTML.
Pozrime sa na praktickú implementáciu:
Krok 1: Použite body prerušenia a mediálne dotazy pomocou pomôcky „break-after“.
Vytvorte program HTML a špecifikujte rôzne hodnoty a štýly pre rôzne veľkosti obrazovky pomocou nástroja „break-after“. Použili sme napríklad „ md 'bod prerušenia s ' prestávka po stĺpci nástroj a nástroj „ lg 'bod prerušenia s ' break-po-vyhnúť sa ”pomôcka:
< telo >
< div trieda = 'columns-2 bg-teal-400' >
< p trieda = 'md:break-after-column lg:break-after-aoid' > Ahoj... < / p >
< p > Vitajte tu... < / p >
< p > Prečítajte si o CSS Tailwind... < / p >
< p > Je to CSS framework... < / p >
< p > Zbohom... < / p >
< / div >
< / telo >
Tu:
- ' md:break-after-column ” znamená, že za týmto špecifickým prvkom
v časti “ md ” bod prerušenia (stredná veľkosť obrazovky).
- ' lg:break-after-aboid “ trieda naznačuje, že prvok by sa mal vyhýbať prerušeniu pri „ lg ” bod prerušenia (veľká veľkosť obrazovky).
Krok 2: Overte výstup
Overte, či boli použité body prerušenia a mediálne dotazy zobrazením webovej stránky HTML:
Na vyššie uvedenej webovej stránke došlo k zalomeniu stĺpca na špecifikovanom prvku na strednej obrazovke a zalomeniu sa zabránilo na veľkej obrazovke.
Záver
Ak chcete použiť „prerušenie“ s bodmi prerušenia a mediálnymi dopytmi v Tailwinde, najprv vytvorte súbor HTML. Potom použite body prerušenia a mediálne dotazy s pomôckou „break-after“ zadaním rôznych hodnôt a štýlu pre rôzne veľkosti obrazovky. Na overenie spustite program HTML a zobrazte webovú stránku. Tento článok demonštroval spôsob využitia „prerušenia“ s bodmi prerušenia a mediálnymi dopytmi v CSS Tailwind.