Egy reszponzív weboldal tervezése során a Tailwind Töréspontok ” és „ Médialekérdezések ” kulcsszerepet játszanak több olyan funkció alkalmazásában, amelyek kényelmesen illeszthetők a különböző képernyőméretekhez. Ezeket a funkciókat különböző osztályokon keresztül kell megadni, pl. md (közepes méretű képernyők)”, „lg(nagy méretű képernyő)” vagy a „@media ” szabály, amely hozzáfűzi a funkciókat a megadott feltétel alapján.
Ez a cikk a következő tartalommal foglalkozik:
- Hogyan alkalmazzunk szövegdekorációs vastagságot hátszél töréspontokkal és médialekérdezésekkel?
- A szövegdíszítési vastagság alkalmazása hátszél töréspontokkal.
- A szövegdíszítés vastagságának alkalmazása Tailwind Media lekérdezésekkel.
Hogyan alkalmazzunk szövegdekorációs vastagságot hátszél töréspontokkal és médialekérdezésekkel?
A ' Szövegdíszítés Vastagság ' segítségével lehet alkalmazni a ' szöveg-dísz-vastagság ” tulajdonság, majd a célvastagság érték pixelben. Ezek a pixelek lehetnek ' 1px, 2px, 4px vagy 8px ”. A ' Töréspontok ' alkalmazzák a különféle alkalmazott funkciók adaptálására a felhasználó képernyőméretének megfelelően a ' md (közepes méretű képernyők), „lg (nagy méretű képernyők) ” osztályok stb. A „ Médialekérdezések ” engedélyezze a feltételes megvalósítási stílusokat a böngésző és az operációs rendszer paraméterei alapján a „@” jellel média ” szabályt.
1. példa: A szövegdíszítési vastagság alkalmazása hátszél töréspontokkal
Ez a példa a szövegdekoráció vastagságát különböző pontokon állítja be a képernyőmérettől függően változó stílus alkalmazásához:
< html >
< fej >
< meta karakterkészlet = 'utf-8' >
< meta név = 'nézőablak' tartalom = 'width=device-width, kezdeti lépték=1' >
< cím >< / cím >
< forgatókönyv src = 'https://cdn.tailwindcss.com' >< / forgatókönyv >
< / fej >
< test >
< textarea osztály = 'aláhúzás md:dekoráció-8 lg:doboz-dekoráció-szelet szöveg-fekete szöveg-2xl' id = 'hőmérséklet' > Ez a Linuxhint < / textarea >
< / test >
< / html >
Ennek a kódrészletnek megfelelően hajtsa végre az alábbi lépéseket:
- Először is adja meg a CDN elérési utat a Tailwind funkciók alkalmazásához.
- Ezután írjon be egy „< textarea >” elemet, és építse be a megadott szövegdíszítés vastagsági szinteket alapértelmezett és közepes képernyőkön a „ md ” osztály, ill.
- A ' szöveg-fekete ” és „ szöveg-2xl ” osztályok a színt (fekete) és a betűméretet, azaz 2xl-t rendelik a szöveghez.
Kimenet
Ebből az eredményből arra lehet következtetni, hogy a szövegdekoráció vastagsága megfelelően igazodik a változó képernyőmérethez.
2. példa: A szövegdíszítés vastagságának alkalmazása Tailwind Media lekérdezésekkel
A '@ média ” szabályt a Médialekérdezésekben használják különféle stílusok megvalósítására a különböző médiatípusokhoz/eszközökhöz. Ez a konkrét bemutató a következő médialekérdezéseket használja a szövegvastagság díszítésére egy megadott paraméter/feltétel alapján:
< html >
< fej >
< meta karakterkészlet = 'utf-8' >
< meta név = 'nézőablak' tartalom = 'width=device-width, kezdeti lépték=1' >
< cím >< / cím >
< forgatókönyv src = 'https://cdn.tailwindcss.com' >< / forgatókönyv >
< / fej >
< test >
< h1 id = 'hőmérséklet' >Ez a Linuxhint< / h1 >
< / test >
< / html >
< stílus típus = 'text/css' >
#temp {
szöveg-dekoráció: aláhúzás;
szöveg- igazítsa : középen;
}
@ média ( max- szélesség :550 képpont ) {
#temp {
szöveg-dísz-vastagság: 4px;
} }
< / stílus >
Ebben a kódblokkban vegye figyelembe az alább megadott módszereket:
- Hasonlóképpen tartalmazza a CDN elérési utat.
- Ezután adjon hozzá egy „< h1 >” elem, amely az „id”-vel rendelkezik.
- A kód CSS részében, a „< stílus >” címkét, stílusozza a mellékelt címsort.
- Ezenkívül hozza létre a „@” média 'szabály, amely olyan feltételt alkalmaz, hogy amíg a képernyő szélessége ' 550 képpont ”, a szöveg-dekoráció-vastagság értéke „ 4 ” pixel.
- Ez olyan, hogy miután a képernyő szélessége meghaladja ezt a határt, a szöveg egyszerűen aláhúzásra kerül.
Kimenet
Ez az eredmény azt jelenti, hogy a „@media” szabály, azaz a médialekérdezések a képernyő szélességének megfelelően kerül alkalmazásra.
Következtetés
A töréspontok és a médialekérdezések szövegdekorációs vastagsággal alkalmazhatók, hogy az alkalmazott funkciókat a felhasználó képernyőméretének megfelelően jelenítsék meg, különféle osztályok használatával, mint például ' md', 'lg ” vagy a „@” jellel média ” szabályt, ill. Ez utóbbi megközelítést a „ CSS ” kód, amely a célelemet meghívja és a beállított paraméter/feltétel alapján díszíti. Ez az útmutató a szövegdíszítés vastagságának a Tailwind Breakpoint és Media Queries segítségével történő alkalmazását dolgozta ki.