Ez a cikk a Tailwind CSS sorrácsán történő töréspontok és médialekérdezések alkalmazásának módszerét mutatja be.
Hogyan lehet töréspontokat és médialekérdezéseket alkalmazni a sorrácson a Tailwindben?
Ha töréspontokat és médialekérdezéseket szeretne alkalmazni a Tailwind sorrácsán, készítsen HTML-programot. Ezután határozza meg a sorok számát a különböző képernyőméretekhez a „ sm ”, „ md ” vagy „ lg ' töréspontok a ' grid-rows-<érték> ' segédprogramok. Ezt követően a képernyő méretének módosításával biztosítsa a weboldal módosításait.
Nézzük a gyakorlati megvalósítást:
1. lépés: Használjon töréspontokat és médialekérdezéseket a sorrács segítségével a HTML programban
Hozzon létre egy HTML programot, és adja meg a sorok számát a különböző képernyőméretekhez a „ grid-rows-<érték> ' hasznosság. Például használtuk a „ md ' töréspont a ' rács-sorok-3 ' segédprogram és ' lg ' töréspontok a ' rács-sorok-5 ” segédprogramok a sorok számának módosításához különböző képernyőméreteken:
< test >
< div osztály = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div osztály = 'bg-teal-500 p-5' > 1 < / div >
< div osztály = 'bg-teal-500 p-5' > 2 < / div >
< div osztály = 'bg-teal-500 p-5' > 3 < / div >
< div osztály = 'bg-teal-500 p-5' > 4 < / div >
< div osztály = 'bg-teal-500 p-5' > 5 < / div >
< div osztály = 'bg-teal-500 p-5' > 6 < / div >
< div osztály = 'bg-teal-500 p-5' > 7 < / div >
< div osztály = 'bg-teal-500 p-5' > 8 < / div >
< div osztály = 'bg-teal-500 p-5' > 9 < / div >
< div osztály = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / test >
Itt:
- ' rács ” osztályt egy rácselrendezés létrehozására használják.
- ' rács-sorok-2 ” osztály határozza meg, hogy a rácsnak 2 egyforma méretű sora legyen.
- ' md:grid-rows-3 ” osztály a rácsot 3 egyenlő méretű sorra változtatja közepes képernyőméreten.
- ' lg:grid-rows-5 ” osztály a rácsot 5 egyenlő méretű sorra változtatja a nagy képernyőn.
- ' grid-flow-col ” osztály a rácselemeket vízszintesen, oszlopokba helyezi.
- ' rés-3 ” osztály 3 egységnyi távolságot állít be az egyes rácselemek között.
- ' m-3 ” osztály 3 egységnyi margót alkalmaz a rácskonténer körül.
- ' szövegközpont ” osztály minden rácselem szövegét középre állítja.
- ' bg-teal-500 ” osztály a kékeszöld színt a rácselemek hátterére állítja.
- ' p-5 ” osztály 5 egységnyi padding-ot ad a gyermeken belüli tartalomhoz
tételeket.
2. lépés: Ellenőrizze a kimenetet
Ha meg szeretné győződni arról, hogy a töréspontokat és a médialekérdezéseket alkalmazták a sorrácson, tekintse meg a HTML-weblapot a képernyő méretének módosításával:
A fenti kimeneten látható, hogy a sorok száma a képernyő méretével változik. Ez azt jelzi, hogy a töréspontokat és a médialekérdezéseket sikeresen alkalmazta a sorrácson.
Következtetés
Ha töréspontokat és médialekérdezéseket szeretne alkalmazni a Tailwind sorrácsán, adja meg a sorok számát a különböző képernyőméretekhez a „ sm ”, „ md ” vagy „ lg ' töréspontok a ' grid-rows-<érték> ' segédprogramok. Ezután a képernyő méretének módosításával biztosítsa a weboldal módosításait. Ez a cikk a Tailwind CSS sorrácsán történő töréspontok és médialekérdezések alkalmazásának módszerét mutatja be.