See artikkel selgitab, kuidas kasutada katkestuspunkti ja meediumipäringut koos Tailwindi asukoha atribuudiga.
Kuidas kasutada positsiooni atribuudiga murdepunkte ja meediapäringuid?
Katkestuspunktid on ülima tundliku disaini loomise põhiplokid. Seda kasutatakse paigutuse kohandamiseks erinevatele ekraanisuurustele. Meediumipäringuid kasutatakse elementidele määratud stiilide rakendamiseks sõltuvalt ekraani eraldusvõimest. Positsiooniatribuuti saab väljundi optimeerimiseks kasutada koos nendega.
1. samm: positsiooniatribuudi rakendamine katkestuspunktide ja meediapäringutega
Selles etapis lisatakse programm, et rakendada asukoha atribuuti piki katkestuspunkte või meediumipäringuid valitud ' lk ” element:
< keha klass = 'bg-slate-500' >
< div klass = 'tekst-kollane-300 p-4 lg:p-8' >
< lk klass = 'suhteline md:absoluutne md:tekst-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4' > Sellel tekstil on sõltuvalt ekraani suurusest erinev fondi suurus. Väikestel ekraanidel on see väiksem, keskmistel ekraanidel keskmise suurusega ja suurtel ekraanidel suurem. < / lk >
< / div >
< / keha >
Selles koodis:
- “ bg-slate-500 ” määrab taustavärvi halli.
- “ tekst-kollane-300 ” muudab teksti värvi kollaseks.
- “ p-4 ” lisab 4 piksli suuruse polsterduse.
- “ lg: p-8' lisab suurtele ekraanidele polsterduse 8px.
- Algpositsioon määratakse emalehe suhtes, kasutades ' sugulane ” klass.
- “ md:text-lg ” muudab teksti keskmisel ekraanil suureks.
- 'md: absoluutne' muudab keskmise suurusega ekraanil teksti asukohta absoluutse suhtes.
- “ md:translate-x-4' ja 'md:translate-y-4' liigutage teksti keskmise suurusega ekraanil 4 pikslit alla ja paremale.
- “ lg:text-xl ” muudab teksti suuruse suurel ekraanil eriti suureks.
- “ lg:staatiline ” muudab suurel ekraanil 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: kontrollige väljundit
Vaadake ülaloleva koodiga loodud veebilehe eelvaadet ja kohandage ekraani suurust, et näha muudatust järgmiselt:
On näha, et tekst näitab reageerivat käitumist keskmise ja suure ekraanisuuruses.
Järeldus
Katkestuspunktide ja meediumipäringute kasutamiseks Tailwindis rakendage katkestuspunkti ja määrake igale murdepunktile meediumipäring ning muutke ka asukoha atribuuti ekraani erinevates katkestuspunktides. Vaikimisi jaotused on ' sm ', ' md ', ' lg ”, ja „ xl ”. See ajaveeb on näidanud, kuidas kasutada murdepunkti ja meediapäringut asukoha atribuudiga Tailwindis.