See artikkel demonstreerib Tailwind CSS-i murdepunktide ja meediumipäringutega 'break-after' kasutamise meetodit.
Kuidas Tailwindis murdepunktide ja meediapäringute abil 'murde pärast' ära kasutada?
Katkestuspunktide ja meediumipäringutega vaheaja kasutamiseks määrake HTML-programmis utiliidi „break-after” abil erinevate ekraanisuuruste jaoks erinevad väärtused ja stiil. Seejärel kontrollige väljundit, vaadates HTML-i veebilehte.
Uurime praktilist rakendamist:
1. samm: kasutage katkestuspunkte ja meediapäringuid utiliidiga „break-after”.
Looge HTML-programm ja määrake utiliidi 'break-after' abil erinevad väärtused ja stiil erinevate ekraanisuuruste jaoks. Näiteks oleme kasutanud ' md ' murdepunkt koos ' murda-pärast-veerg ' utiliit ja ' lg ' murdepunkt koos ' murda-pärast-vältida ” utiliit:
< keha >
< div klass = 'columns-2 bg-teal-400' >
< lk klass = 'md:break-after-column lg:break-after-avoid' > Tere... < / lk >
< lk > Tere tulemast siia... < / lk >
< lk > Lisateave Tailwindi CSS-i kohta... < / lk >
< lk > See on CSS-i raamistik ... < / lk >
< lk > Hüvasti... < / lk >
< / div >
< / keha >
Siin:
- ' md:break-after-colum ” klass näitab, et veeru katkestus peaks toimuma pärast seda konkreetset
elementi „ md ” murdepunkt (keskmine ekraanisuurus).
- ' lg:break-after-avoid ” klass soovitab, et element peaks vältima katkestust lg ” murdepunkt (suur ekraani suurus).
2. samm: kontrollige väljundit
Kontrollige, kas katkestuspunktid ja meediapäringud on rakendatud, vaadates HTML-i veebilehte:
Ülaltoodud veebilehel on keskmisel ekraanil määratud elemendil veeru katkemine toimunud ja suurel ekraanil on pärast katkemist välditud.
Järeldus
Tailwindis katkestuspunktide ja meediumipäringutega 'break-after' kasutamiseks looge esmalt HTML-fail. Seejärel kasutage katkestuspunkte ja meediumipäringuid utiliidi „break-after” abil, määrates erinevate ekraanisuuruste jaoks erinevad väärtused ja stiili. Kontrollimiseks käivitage HTML-programm ja vaadake veebilehte. See artikkel on demonstreerinud meetodit 'break-after' kasutamiseks katkestuspunktide ja meediapäringutega Tailwind CSS-is.