Kaip naudoti lūžio taškus ir medijos užklausas su „perpildymo“ programomis „Tailwind“?

Šis įrašas parodys, kaip taikyti lūžio taškus ir medijos užklausas „Tailwind CSS“ „perpildymo“ programoms.

Kaip panaudoti lūžio taškus ir medijos užklausas su „perpildymu“ „Tailwind“?

Norėdami pritaikyti tam tikrus lūžio taškus ir medijos užklausas „Tailwind“ „perpildymo“ programoms, sukurkite HTML struktūrą. Tada naudokite „ md “ arba „ lg ” lūžio taškai su norimais „perpildymas-“ komunalinės paslaugos, skirtos kontroliuoti nurodyto elemento perpildymo elgesį skirtingų dydžių ekranuose. Tada, norėdami patikrinti, pakeiskite tinklalapio ekrano dydį.

Pavyzdys
Šiame pavyzdyje mes naudosime 'md' lūžio taškas su „perpildymas-slinkimas“ naudingumas

Čia:

• The „automatinis perpildymas“ klasė naudojama slinkties juostoms pridėti prie konteinerį ir rodyti juos tik tada, kai reikia slinkti.
• The 'md: overflow-scroll' klasė prideda slinkties juostas ir visada rodo jas 'md' lūžio taškas (vidutinio ekrano dydžio).

Išvestis:


---





---

Remiantis pirmiau pateikta produkcija, pertraukos taškai ir medijos užklausos buvo sėkmingai pritaikytos „perpildymo“ programoms.

Išvada

Norėdami pritaikyti lūžio taškus ir medijos užklausas „perpildymo“ programoms „Tailwind“, naudokite „ sm “, „ md “ arba „ lg ' pertraukos taškai su norimu ' perpildymas- “ komunalinės paslaugos HTML programoje. Šie lūžio taškai kontroliuoja nurodyto elemento perpildymo elgseną skirtinguose ekrano dydžiuose. Šiame rašte iliustruotas pavyzdys, kaip taikyti konkrečius lūžio taškus ir medijos užklausas „Tailwind“ „perpildymo“ programoms.