Ez a cikk elmagyarázza, hogyan használható a töréspont és a médialekérdezés a pozíció tulajdonsággal együtt a Tailwindben.
Hogyan lehet kihasználni a töréspontokat és a médialekérdezéseket a pozíciótulajdonsággal?
A töréspontok jelentik az alapvető blokkokat a tökéletes érzékeny dizájn létrehozásához. Arra használják, hogy az elrendezést a különböző képernyőméretekhez igazítsák. A médialekérdezések a képernyőfelbontástól függően meghatározott stílusok alkalmazására szolgálnak az elemekre. A pozíció attribútum ezekkel együtt alkalmazható, hogy a kimenet optimalizáltabb legyen.
1. lépés: A pozíciótulajdonság alkalmazása töréspontokkal és médialekérdezésekkel
Ebben a lépésben a program beillesztésre kerül, hogy alkalmazza a pozíció tulajdonságot a töréspontok vagy a médialekérdezések mentén a kiválasztott ' p ” elem:
< test osztály = 'bg-slate-500' >
< div osztály = 'text-yellow-300 p-4 lg:p-8' >
< p osztály = 'relatív md:abszolút md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4' > Ez a szöveg a képernyő méretétől függően eltérő betűmérettel rendelkezik. Kis képernyőkön kisebb, közepesen közepes, nagy képernyőkön pedig nagyobb lesz. < / p >
< / div >
< / test >
Ebben a kódban:
- ' bg-slate-500 ” a háttérszínt szürkére állítja.
- ' szöveg-sárga-300 ” megváltoztatja a szöveg színét sárgára.
- ' p-4 ” ad hozzá egy 4 képpontos kitöltést.
- ' lg: p-8' 8 képpontos kitöltést ad a nagy képernyőkön.
- A kezdeti pozíció a szülőoldalhoz képest a ' relatív ' osztály.
- ' md:text-lg ” nagyméretűvé teszi a szöveget egy közepes méretű képernyőn.
- 'md:absolute' közepes méretű képernyőn módosítja a szöveg helyzetét relatívról abszolútra.
- ' md:translate-x-4” és 'md:translate-y-4' mozgassa a szöveget 4 képponttal lefelé és jobbra közepes méretű képernyőn.
- ' lg:text-xl ” nagy méretű képernyőn a szöveg méretét extra nagyra változtatja.
- ' lg:static ” megváltoztatja a szöveg helyzetét a szülőoldalhoz képest abszolútról statikusra egy nagy méretű képernyőn
- ' lg:translate-x-4 ” és „ lg:translate-y-4 ” mozgassa a szöveget 4 képponttal lefelé és jobbra nagy képernyőn.
2. lépés: Ellenőrizze a kimenetet
Tekintse meg a fenti kóddal létrehozott weboldal előnézetét, és állítsa be a képernyő méretét, hogy lássa a változást:
Látható, hogy a szöveg reszponzív viselkedést mutat közepes és nagy képernyőméreteken.
Következtetés
Ha töréspontokat és médialekérdezéseket szeretne használni a Tailwindben, alkalmazza a töréspontot és állítsa be a médialekérdezést minden töréspontra, valamint módosítsa a pozíció tulajdonságot a képernyő különböző töréspontjain. Az alapértelmezett lebontások a következők: sm ', ' md ', ' lg ”, és „ xl ”. Ez a blog bemutatja, hogyan kell használni a töréspontot és a médialekérdezést a pozíció tulajdonsággal a Tailwindben.