See kirjutis illustreerib murdepunktide ja meediumipäringute rakendamise meetodit Tailwind CSS-i 'ülevoolu' utiliitidele.
Kuidas kasutada murdepunkte ja meediapäringuid Tailwindis 'ülevooluga'?
Konkreetsete katkestuspunktide ja meediumipäringute rakendamiseks Tailwindi 'ülevoolu' utiliitidele looge HTML-struktuur. Seejärel kasutage ' md ” või „ lg ” katkestuspunktid soovitud 'ületäitumine-
Näide
Selles näites kasutame 'md' murdepunkt koos 'ületäitumine-kerimine' utiliit
konteiner, et lisada sellele kerimisribad ja kuvada need alati keskmise suurusega ekraanil: < keha >
< div klass = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS pakub erinevaid 'ülevoolu' utiliite, nagu
'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible'
jne. Need utiliidid määravad, kuidas konkreetne element sisu käsitleb
mis ületab konteineri suuruse. Iga utiliit pakub ainulaadset funktsiooni,
nende lõppeesmärk jääb aga samaks, st ülevoolu kontrollimine
valitud elemendi käitumine.
< / div >
< / keha >
Siin:
- The 'ülevoolu-automaat' klassi kasutatakse kerimisribade lisamiseks konteinerisse ja kuvage neid ainult siis, kui kerimine on vajalik.
- The 'md:ületäitmine-kerimine' klass lisab kerimisribad ja näitab neid alati lehel 'md' murdepunkt (keskmine ekraani suurus).
Väljund:
Ülaltoodud väljundi kohaselt on katkestuspunktid ja meediumipäringud edukalt rakendatud 'ülevoolu' utiliitidele.
Järeldus
Katkestuspunktide ja meediumipäringute rakendamiseks Tailwindis „ülevoolu” utiliitidele kasutage „ sm ”, “ md ” või „ lg 'murdepunktid soovitud' ületäitumine-