Šiame straipsnyje bus parodytas metodas, kaip naudoti „pertrauką“ su lūžio taškais ir medijos užklausomis „Tailwind CSS“.
Kaip „Tailwind“ išnaudoti „pertrauką“ naudojant lūžio taškus ir medijos užklausas?
Norėdami naudoti pertrauką su lūžio taškais ir medijos užklausomis, apibrėžkite skirtingas reikšmes ir stilių skirtingiems ekrano dydžiams naudodami HTML programos „pertraukos“ įrankį. Tada patikrinkite išvestį peržiūrėdami HTML tinklalapį.
Panagrinėkime praktinį įgyvendinimą:
1 veiksmas: naudokite lūžio taškus ir medijos užklausas su „break-after“ programa
Sukurkite HTML programą ir nurodykite skirtingas reikšmes bei stilių skirtingiems ekrano dydžiams naudodami „break-after“ įrankį. Pavyzdžiui, mes naudojome „ md ' pertraukos taškas su ' pertrauka po stulpelio 'naudingumas ir ' lg ' pertraukos taškas su ' pertraukos po-vengti ' naudingumas:
< kūnas >
< div klasė = 'columns-2 bg-teal-400' >
< p klasė = 'md:break-after-column lg:break-after-avoid' > Sveiki... < / p >
< p > Sveiki atvykę čia... < / p >
< p > Sužinokite apie Tailwind CSS... < / p >
< p > Tai CSS sistema... < / p >
< p > Ate... < / p >
< / div >
< / kūnas >
Čia:
- „ md:break-af-colum “ klasė rodo, kad po šio konkretaus
elemento turėtų įvykti stulpelio lūžis md ” lūžio taškas (vidutinio ekrano dydžio).
- „ lg: pertrauka-po-vengti “ klasė siūlo, kad elementas turėtų vengti pertraukos po „ lg ” pertraukos taškas (didelio ekrano dydis).
2 veiksmas: patikrinkite išvestį
Patikrinkite, ar buvo pritaikytos lūžio taškai ir medijos užklausos, peržiūrėdami HTML tinklalapį:
Aukščiau pateiktame tinklalapyje stulpelio lūžis įvyko nurodytame elemente vidutiniame ekrane, o lūžio po buvo išvengta dideliame ekrane.
Išvada
Norėdami panaudoti pertraukos tašką ir medijos užklausas programoje Tailwind, pirmiausia sukurkite HTML failą. Tada naudokite pertraukos taškus ir medijos užklausas su „pertraukimo“ programa, nurodydami skirtingas reikšmes ir stilių skirtingiems ekrano dydžiams. Norėdami patikrinti, paleiskite HTML programą ir peržiūrėkite tinklalapį. Šiame straipsnyje parodytas metodas, kaip naudoti „pertrauką“ su lūžio taškais ir medijos užklausomis „Tailwind CSS“.