Paano Gumamit ng Mga Breakpoint at Mga Query sa Media Sa Mga Utility na 'overflow' sa Tailwind?

Ang write-up na ito ay maglalarawan ng paraan ng paglalapat ng mga breakpoint at media query sa 'overflow' na mga utility sa Tailwind CSS.

Paano Gamitin ang Mga Breakpoint at Mga Query sa Media Gamit ang 'overflow' sa Tailwind?

Para maglapat ng mga partikular na breakpoint at media query sa mga 'overflow' na utility sa Tailwind, gumawa ng HTML structure. Pagkatapos, gamitin ang ' md 'o' lg ” breakpoints na may ninanais “overflow-” mga utility upang kontrolin ang overflow na gawi ng tinukoy na elemento sa iba't ibang laki ng screen. Susunod, baguhin ang laki ng screen ng web page para sa pag-verify.

Halimbawa
Sa halimbawang ito, gagamitin natin ang “md” breakpoint kasama ang 'overflow-scroll' utility sa

dito:

• Ang 'overflow-auto' class ay ginagamit upang idagdag ang mga scrollbar sa lalagyan at ipakita lamang ang mga ito kapag kailangan ang pag-scroll.
• Ang “md:overflow-scroll” idinaragdag ng klase ang mga scrollbar at palaging ipinapakita ang mga ito sa “md” breakpoint (katamtamang laki ng screen).

Output:


---





---

Ayon sa output sa itaas, ang mga breakpoint at media query ay matagumpay na nailapat sa mga 'overflow' na mga utility.

Konklusyon

Para sa paglalapat ng mga breakpoint at media query sa 'overflow' na mga utility sa Tailwind, gamitin ang ' sm ”, “ md 'o' lg 'breakpoints na may ninanais' overflow- ” mga utility sa HTML program. Kinokontrol ng mga breakpoint na ito ang overflow na gawi ng tinukoy na elemento sa iba't ibang laki ng screen. Ang pagsusulat na ito ay naglalarawan ng halimbawa upang maglapat ng mga partikular na breakpoint at mga query sa media sa 'overflow' na mga utility sa Tailwind.