Aquest escrit il·lustrarà el mètode d'aplicació de punts d'interrupció i consultes multimèdia a les utilitats de 'desbordament' a Tailwind CSS.
Com utilitzar els punts d'interrupció i les consultes de mitjans amb 'desbordament' a Tailwind?
Per aplicar punts d'interrupció i consultes multimèdia particulars a les utilitats de 'desbordament' a Tailwind, creeu una estructura HTML. A continuació, utilitzeu el ' md ' o ' lg ” punts de ruptura amb el desitjat 'desbordament-
Exemple
En aquest exemple, farem servir el 'md' punt de ruptura amb el 'desbordament-desplaçament' utilitat en el
contenidor per afegir-hi les barres de desplaçament i sempre les mostra a una mida de pantalla mitjana: < cos >
< div classe = 'overflow-auto md: overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS proporciona diverses utilitats de 'desbordament', com ara
'desbordament-automàtic', 'desbordament-desplaçament', 'desbordament-ocult', 'desbordament-visible'
etc. Aquestes utilitats determinen com un element específic gestiona el contingut
que supera la mida del contenidor. Cada utilitat ofereix una funcionalitat única,
tanmateix, el seu objectiu final segueix sent el mateix, és a dir, controlar el desbordament
comportament de l'element seleccionat.
< / div >
< / cos >
Aquí:
- El 'desbordament automàtic' La classe s'utilitza per afegir les barres de desplaçament al fitxer contenidor i mostrar-los només quan calgui desplaçar-se.
- El 'md:overflow-scroll' La classe afegeix les barres de desplaçament i sempre les mostra al fitxer 'md' punt d'interrupció (mida de pantalla mitjana).
Sortida:
Segons la sortida anterior, els punts d'interrupció i les consultes multimèdia s'han aplicat amb èxit a les utilitats 'desbordament'.
Conclusió
Per aplicar punts d'interrupció i consultes multimèdia a les utilitats de 'desbordament' a Tailwind, utilitzeu el botó ' sm ”, “ md ' o ' lg 'punts d'interrupció amb el desitjat' desbordament-