Ez az írás bemutatja a Tailwind CSS reszponzív töréspontjainak használatának módszerét.
Hogyan használjunk érzékeny töréspontokat a Tailwindben?
Ha reszponzív töréspontokat szeretne használni a Tailwindben, használja a reszponzív módosítókat, például ' sm ”, „ md ”, „ lg ”, „ xl ” és „ 2xl ” a HTML program többi osztályával. Ezután tekintse meg a HTML weboldalt, és módosítsa a képernyő méretét, hogy biztosítsa a töréspontok megfelelő működését.
1. lépés: Reszponzív módosítók használata a HTML programban
Készítsen HTML programot, és használja a reszponzív módosítókat a kívánt stílussal. Például használtuk a „ sm ”, „ md ”, „ lg ”, „ xl ” és „ 2xl ” reszponzív módosítók:
< test >
< div osztály = 'h-screen bg-fukszia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 osztály = 'text-7xl text-white text-center p-20' > Linux tipp < / h1 >
< / div >
< / test >
Itt:
- ' bg-fuksia-400 ” osztály állítja be a háttérszínt a a fuksziához.
- ' sm:bg-pink-600 ” osztály kis képernyők esetén rózsaszín színt alkalmaz a háttérre.
- ' md:bg-green-700 ” osztály közepes képernyőkön zöldre változtatja a háttérszínt.
- ' lg:bg-lila-50 ” osztály nagy képernyők esetén lilára állítja a háttérszínt.
- ' xl:bg-teal-600 ” osztály a kékeszöld színt alkalmazza az extra nagy képernyők hátterére.
- ' 2xl:bg-sárga-500 ” osztály 2xl-es képernyőkön sárgára változtatja a háttérszínt.
2. lépés: Ellenőrizze a kimenetet
Tekintse meg a HTML weboldalt, és ellenőrizze, hogy a reszponzív töréspontok megfelelően működnek-e vagy sem:
A fenti weboldalon megfigyelhető, hogy a weboldal színe a töréspontok megadásának megfelelő képernyőmérettel változik.
Következtetés
Ha reszponzív töréspontokat szeretne használni a Tailwindben, használja a reszponzív módosítókat, például ' sm ”, „ md ”, „ lg ”, „ xl ” és „ 2xl ” a HTML program többi osztályával. Ezeket a módosítókat arra használják, hogy a képernyő méretétől függően különböző stílusokat alkalmazzanak egy adott elemre. Ez az írás példát mutatott a Tailwind CSS reszponzív töréspontjainak használatára.