Tämä artikkeli esittelee menetelmän 'break-after':n hyödyntämiseksi keskeytyspisteiden ja mediakyselyiden kanssa Tailwind CSS:ssä.
Kuinka hyödyntää 'break-after' murtopisteiden ja mediakyselyiden kanssa Tailwindissä?
Voit käyttää 'break-after' -toimintoa keskeytyspisteiden ja mediakyselyjen kanssa määrittämällä eri arvot ja tyylit eri näyttökooille HTML-ohjelman 'break-after' -apuohjelmalla. Tarkista sitten tulos katsomalla HTML-verkkosivua.
Katsotaanpa käytännön toteutusta:
Vaihe 1: Käytä keskeytyspisteitä ja mediakyselyjä 'break-after' -apuohjelman kanssa
Luo HTML-ohjelma ja määritä eri arvot ja tyylit eri näyttökokoille 'break-after' -apuohjelmalla. Olemme esimerkiksi käyttäneet ' md 'katkoskohta ' katko-af-sarake ”apuohjelma ja ” lg 'katkoskohta ' katkoksen välttäminen ”apuohjelma:
< kehon >
< div luokkaa = 'columns-2 bg-teal-400' >
< s luokkaa = 'md:break-after-column lg:break-after-avoid' > Hei... < / s >
< s > Tervetuloa tänne... < / s >
< s > Lisätietoja Tailwind CSS:stä... < / s >
< s > Se on CSS-kehys... < / s >
< s > Hei hei... < / s >
< / div >
< / kehon >
Tässä:
- ' md:break-after-column '-luokka osoittaa, että sarakkeenvaihdon tulisi tapahtua tämän tietyn
-elementin jälkeen ' md ” keskeytyskohta (keskikokoinen näyttö).
- ' lg:break-after-avoid '-luokka ehdottaa, että elementin tulisi välttää katkosta ' lg ” keskeytyskohta (suuri näyttö).
Vaihe 2: Tarkista lähtö
Tarkista HTML-verkkosivulta, onko keskeytyskohtia ja mediakyselyjä käytetty:
Yllä olevalla verkkosivulla sarakkeen vaihto on tapahtunut määritetyssä elementissä keskikokoisella näytöllä ja katkosta on vältetty suurella näytöllä.
Johtopäätös
Luo ensin HTML-tiedosto, jotta voit hyödyntää 'break-after' -toimintoa keskeytyspisteiden ja mediakyselyiden kanssa Tailwindissä. Käytä sitten keskeytyskohtia ja mediakyselyjä 'break-after' -apuohjelmalla määrittämällä eri arvot ja tyylit eri näyttökokoille. Vahvista suorittamalla HTML-ohjelma ja tarkastelemalla verkkosivua. Tämä artikkeli on osoittanut menetelmän hyödyntää 'break-after' -toimintoa keskeytyspisteiden ja mediakyselyiden kanssa Tailwind CSS:ssä.