See ajaveeb demonstreerib Tailwindis ülekerimise utiliidi abil meediapäringute ja katkestuspunktide rakendamise protsessi.
Kuidas rakendada Tailwindis ülekerimisega meediumipäringuid ja murdepunkte?
Katkestuspunktide või selle muu nimega meediumipäringute rakendamiseks CSS-i puhul koos ' üle kerida ” utiliit. HTML programm on loodud ja rakendab erinevaid katkestuspunkte ' sm ', ' md ” või „ lg ' koos sobivate utiliidi klassidega 'ülekerimise' utiliidist. See muudab üksuste kerimiskäitumist erineva suurusega ekraanidel.
1. samm: kasutage HTML-koodi katkestuspunkte ja meediapäringuid
Looge HTML-dokument ja rakendage katkestuspunkte, mis on iga katkestuspunkti ekraani suurused ja meediumipäringud. Näiteks ' md ” ja „ lg ” kasutatakse allolevas koodis teksti suuruse määramiseks katkestuspunkte ja sellele rakendatakse ülekerimise käitumist:
< keha klass = 'bg-slate-500' >
< div klass = 'text-red-900 p-4 lg:p-8' >
< lk klass = 'suhteline md:absoluutne md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none lg:text-xl lg:staatiline lg:tõlgi-x-4 lg :translate-y-4' > Sellel tekstil on sõltuvalt ekraani suurusest erinev fondi suurus. See on väikestel ekraanidel väiksem , keskmine - keskmise suurusega ekraanidel , ja suurematel suurtel ekraanidel. lk >
div >
keha >
Selles koodis:
- “ bg-slate-500 ” määrab taustavärvi halli.
- “ tekst-punane-900 ” muudab teksti värvi punaseks.
- “ p-4 ” lisab 4 piksli suuruse polsterduse.
- “ lg: p-8 ” lisab suurtele ekraanidele 8px polsterduse.
- ' märgend määratakse emalehe suhtes, kasutades ' sugulane ” klass.
- “ md: absoluutne ” muutke keskmise suurusega ekraanil teksti asukohta suhtelisest absoluutseks.
- “ md:overscroll-contain ' tagab, et 'ülekerimise' käitumine sisaldub selles elemendis, mitte ei mõjutaks kogu lehte, kui ekraan on keskmise suurusega.
- “ md:text-lg ” muudab teksti keskmisel ekraanil suureks.
- “ md:translate-x-4 ” ja „ md:translate-y-4 'teisalda teksti' 4 pikslit ” alla ja paremale keskmise suurusega ekraanil.
- “ lg:overscroll-none ' määrab ' üle kerida ” klassi omadus suurel ekraanil mitte ühelegi.
- “ lg:text-xl ” muudab teksti suuruse suure ekraani jaoks eriti suureks.
- “ lg:staatiline ” muudab suure ekraani puhul teksti positsiooni emalehe suhtes absoluutsest staatiliseks
- “ lg:translate-x-4 ” ja „ lg:translate-y-4 ” liigutage suurel ekraanil teksti 4 pikslit alla ja paremale.
2. samm: väljundi eelvaade
Nüüd vaadake ülaltoodud HTML-koodi käivitamisega loodud veebilehte ja muutke nähtavate muudatuste nägemiseks HTML-saidi ekraani suurust:
Ülaltoodud ekraanil kuvatakse „ üle kerida ” käitumine on nähtav ja ekraani suurust vähendades on näha, et teksti suurus muutub sellele rakendatud meediumipäringutega.
Järeldus
Meediumipäringute ja katkestuspunktide rakendamiseks ' üle kerida ” utiliidi, määrake murdepunktid mõne soovitud klassiga 'ülekerimise' utiliidist. Ekraani suurust muutes reguleerivad meediumipäringud ekraani väljundit. See ajaveeb on demonstreerinud Tailwindis meediumipäringute ja katkestuspunktide 'ülekerimise' käitumise rakendamise protsessi.