Ez a cikk bemutatja a „break-after” töréspontokkal és médialekérdezésekkel történő felhasználásának módszerét a Tailwind CSS-ben.
Hogyan lehet kihasználni a „break-after” funkciót a töréspontokkal és a médialekérdezésekkel a Tailwindben?
A töréspontokkal és médialekérdezésekkel „break-after” használatához a HTML-program „break-after” segédprogramjával határozzon meg különböző értékeket és stílust a különböző képernyőméretekhez. Ezután ellenőrizze a kimenetet a HTML weboldal megtekintésével.
Nézzük a gyakorlati megvalósítást:
1. lépés: Használjon töréspontokat és médialekérdezéseket a „break-after” segédprogrammal
Hozzon létre egy HTML programot, és adjon meg különböző értékeket és stílust a különböző képernyőméretekhez a „break-after” segédprogrammal. Például használtuk a „ md ' töréspont a ' utántörő oszlop ' segédprogram és a ' lg ' töréspont a ' törés utáni elkerülés ' hasznosság:
< test >
< div osztály = 'columns-2 bg-teal-400' >
< p osztály = 'md:break-after-column lg:break-after-avoid' > Helló... < / p >
< p > Üdvözöllek itt... < / p >
< p > További információ a Tailwind CSS-ről... < / p >
< p > Ez egy CSS keretrendszer... < / p >
< p > Viszlát... < / p >
< / div >
< / test >
Itt:
- A ' md:break-after-colum ” osztály azt jelzi, hogy az adott
elem után oszloptörésnek kell bekövetkeznie a „ md ” töréspont (közepes képernyőméret).
- A ' lg:break-after-avid ” osztály azt javasolja, hogy az elemnek kerülnie kell az utántörést a „ lg ” töréspont (nagy képernyőméret).
2. lépés: Ellenőrizze a kimenetet
A HTML-weboldal megtekintésével ellenőrizze, hogy a töréspontokat és a médialekérdezéseket alkalmazták-e:
A fenti weboldalon a közepes képernyőn a megadott elemen történt az oszloptörés, a nagy képernyőn az utántörést elkerültük.
Következtetés
A „break-after” töréspontok és médialekérdezések használatához a Tailwindben először hozzon létre egy HTML-fájlt. Ezután használja a töréspontokat és a médialekérdezéseket a „break-after” segédprogrammal úgy, hogy különböző értékeket és stílust ad meg a különböző képernyőméretekhez. Az ellenőrzéshez futtassa a HTML programot, és tekintse meg a weboldalt. Ez a cikk bemutatta a „break-after” töréspontokkal és médialekérdezésekkel történő felhasználásának módszerét a Tailwind CSS-ben.