Тази статия ще илюстрира метода за прилагане на точки на прекъсване и медийни заявки върху помощните програми за „изчистване“ в Tailwind.
Как да използвам точки на прекъсване и медийни заявки при „изчистване“ в Tailwind?
За да приложите определени точки на прекъсване и медийни заявки за „изчистване“ на помощните програми в Tailwind, създайте HTML структура. След това дефинирайте желаната стойност на „ изчистване-<стойност> ” помощна програма за различни размери на екрана с помощта на „ md ' или ' lg ” точки на прекъсване. И накрая, променете размера на екрана на уеб страницата за проверка.
Пример
В този пример ще използваме „ md ' точка на прекъсване с ' ясно-и двете ' полезност и ' lg ' точка на прекъсване с ' ясно-няма ” помощна програма в „ ”, за да промени позицията си на среден и голям екран:
< тяло >
< див клас = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' клас = 'float-left p-3 w-28 h-24' всичко = 'изображение' / >
< img src = 'tailwindcss_img.png' клас = 'float-right p-3' всичко = 'изображение' / >
< стр клас = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS предоставя 'плаващи' помощни програми за контролиране на обвиването на съдържание около елемент.
Този пример ще покаже как да използвате точки на прекъсване и медийни заявки с помощна програма 'изчистване' в Tailwind. < / стр >
< / див >
< / тяло >
Тук:
- 'float-left' class измества елементите от лявата страна на контейнера.
- „плаващ надясно“ class премества елементите в дясната страна на контейнера.
- „ясно ляво“ клас премества елемента
под плаващия вляво елемент в контейнера.
- „md:изчистване-и двете“ клас изчиства левия и десния плаващ елемент и позиционира елемента
под тях на среден размер на екрана.
- „lg: ясно-няма“ клас деактивира всяко изчистване, приложено към елемента
и позволява на елемента да плава от двете страни на контейнера при голям размер на екрана.
Изход
Според горния резултат посочените точки на прекъсване и медийни заявки са приложени успешно към помощната програма „изчистване“.
Заключение
За прилагане на точки на прекъсване и медийни заявки за „изчистване“ помощни програми в Tailwind, дефинирайте желаната стойност на „ изчистване-<стойност> ” помощна програма за различни размери на екрана чрез използване на „ md ' или ' lg ” точки на прекъсване. За проверка променете размера на екрана на уеб страницата и осигурете промени. Тази статия демонстрира примера за прилагане на конкретни точки на прекъсване и медийни заявки върху помощните програми за „изчистване“ в Tailwind.