Ez a blog bemutatja a médialekérdezések és töréspontok alkalmazásának folyamatát a Tailwind overscroll segédprogramjával.
Hogyan lehet médialekérdezéseket és töréspontokat alkalmazni túlgörgetéssel a Tailwindben?
A töréspontok vagy annak egyéb nevei médialekérdezések alkalmazása, amikor CSS-ről van szó a „ túlgörgetés ' hasznosság. A HTML program létrejön, és alkalmazza a különböző töréspontokat ' sm ', ' md ” vagy „ lg ” a megfelelő segédosztályokkal az „overscroll” segédprogramból. Megváltoztatja az elemek görgetési viselkedését a különböző képernyőméreteken.
1. lépés: Használja a töréspontokat és a médialekérdezéseket a HTML-kódban
Hozzon létre egy HTML-dokumentumot, és alkalmazza a töréspontokat, amelyek az egyes töréspontokhoz tartozó képernyőméretek és médialekérdezések. Például ' md ” és „ lg ” töréspontokat használunk az alábbi kódban a szöveg méretéhez, és a túlgörgetési viselkedést alkalmazzuk rá:
< test osztály = 'bg-slate-500' >
< div osztály = 'text-red-900 p-4 lg:p-8' >
< p osztály = 'relatív md:abszolút md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none 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. Azt kisebb lesz a kis képernyőkön , közepes - közepes méretű képernyőkön , és nagyobb a nagy képernyőkön. p >
div >
test >
Ebben a kódban:
- ' bg-slate-500 ” a háttérszínt szürkére állítja.
- ' szöveg-piros-900 ” megváltoztatja a szöveg színét pirosra.
- ' 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 „ ' címke a szülőoldalhoz képest a ' relatív ' osztály.
- ' md:abszolút ” megváltoztatja a szöveg helyzetét relatívról abszolútra egy közepes méretű képernyőn.
- ' md:overscroll-contain ” biztosítja, hogy a „túlgörgetés” viselkedés az adott elemen belül legyen, ahelyett, hogy a teljes oldalt érintené, ha a képernyő közepes méretű.
- ' md:text-lg ” nagyméretűvé teszi a szöveget egy közepes méretű képernyőn.
- ' md:translate-x-4 ” és „ md:translate-y-4 ' mozgassa a szöveget ' 4 képpont ” lefelé és jobbra közepes méretű képernyőn.
- ' lg:overscroll-none ” beállítja a „ túlgörgetés ” osztályú tulajdonság a none-hoz egy nagy méretű képernyőn.
- ' lg:text-xl ” módosítja a szöveg méretét extra nagyra egy nagy méretű képernyőn.
- ' lg:static ” megváltoztatja a szöveg helyzetét a szülőoldalhoz képest abszolútról statikusra 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: Tekintse meg a kimenet előnézetét
Most tekintse meg a fenti HTML-kód végrehajtásával létrehozott weboldal előnézetét, és módosítsa a HTML-webhely képernyőméretét a látható változások megtekintéséhez:
A fenti képernyőn a „ túlgörgetés ” viselkedés látható, és a képernyő méretének csökkentésével látható, hogy a szöveg mérete a rá alkalmazott médialekérdezések hatására változik.
Következtetés
A médialekérdezések és töréspontok alkalmazása a „ túlgörgetés ” segédprogramot, adja meg a töréspontokat a kívánt osztályokkal az „overscroll” segédprogramból. A képernyő méretének változtatásával a médialekérdezések beállítják a képernyő kimenetét. Ez a blog bemutatta a médialekérdezések és töréspontok „túlgörgetési” viselkedésével történő alkalmazásának folyamatát a Tailwindben.