See kirjutis illustreerib Tailwind CSS-i reageerivate katkestuspunktide kasutamise meetodit.
Kuidas kasutada Tailwindis reageerivaid murdepunkte?
Reageerivate katkestuspunktide kasutamiseks Tailwindis kasutage reageerivaid modifikaatoreid, näiteks ' sm ”, “ md ”, “ lg ”, “ xl ” ja „ 2xl ” koos teiste HTML-programmi klassidega. Seejärel vaadake HTML-i veebilehte ja muutke ekraani suurust, et tagada katkestuspunktide õige töö.
1. samm: kasutage HTML-programmis reageerivaid modifikaatoreid
Looge HTML-programm ja kasutage soovitud stiiliga reageerivaid modifikaatoreid. Näiteks oleme kasutanud ' sm ”, “ md ”, “ lg ”, “ xl ” ja „ 2xl ” reageerivad modifikaatorid:
< keha >
< div klass = 'h-ekraan bg-fuksia-400 sm:bg-roosa-600 md:bg-roheline-700 lg:bg-lilla-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 klass = 'text-7xl text-white text-center p-20' > Linuxi vihje < / h1 >
< / div >
< / keha >
Siin:
- “ bg-fuksia-400 ” klass määrab selle taustavärvi fuksiani.
- “ sm: bg-roosa-600 ” klass rakendab väikeste ekraanide puhul taustale roosat värvi.
- “ md:bg-roheline-700 ” klass muudab keskmistel ekraanidel taustavärvi roheliseks.
- “ lg:bg-lilla-50 ” klass määrab suurte ekraanide taustavärviks lilla.
- “ xl:bg-teal-600 ” klass rakendab eriti suurte ekraanide jaoks sinakaspruuni värvi tausta.
- “ 2xl: bg-kollane-500 ” klass muudab 2xl ekraanidel taustavärvi kollaseks.
2. samm: kontrollige väljundit
Vaadake HTML-i veebilehte, et kontrollida, kas reageerivad katkestuspunktid töötavad korralikult või mitte.
Ülaltoodud veebilehel on märgata, et veebilehe värv muutub koos ekraani suurusega, mille järgi katkestuspunktid määrati.
Järeldus
Reageerivate katkestuspunktide kasutamiseks Tailwindis kasutage reageerivaid modifikaatoreid, näiteks ' sm ”, “ md ”, “ lg ”, “ xl ” ja „ 2xl ” koos teiste HTML-programmi klassidega. Neid modifikaatoreid kasutatakse erinevate stiilide rakendamiseks konkreetsele elemendile vastavalt ekraani suurusele. See kirjeldus on näide Tailwind CSS-i reageerivate katkestuspunktide kasutamise meetodi kohta.