Тази статия ще демонстрира метода за използване на „прекъсването след“ с точки на прекъсване и медийни заявки в Tailwind CSS.
Как да използваме „прекъсване след“ с точки на прекъсване и медийни заявки в Tailwind?
За да използвате „прекъсване след“ с точки на прекъсване и медийни заявки, дефинирайте различни стойности и стилове за различни размери на екрана с помощната програма „прекъсване след“ в HTML програмата. След това проверете изхода, като прегледате HTML уеб страницата.
Нека проучим практическото изпълнение:
Стъпка 1: Използвайте точки на прекъсване и медийни заявки с помощната програма „прекъсване след“.
Създайте HTML програма и задайте различни стойности и стилове за различни размери на екрана с помощната програма „прекъсване след“. Например използвахме „ md ' точка на прекъсване с ' прекъсване-след-колона ” помощна програма и „ lg ' точка на прекъсване с ' прекъсване след избягване ” помощна програма:
< тяло >
< див клас = 'колони-2 bg-teal-400' >
< стр клас = 'md:break-after-column lg:break-after-avoid' > Здравейте... < / стр >
< стр > Добре дошъл тук... < / стр >
< стр > Научете за Tailwind CSS... < / стр >
< стр > Това е CSS рамка... < / стр >
< стр > Чао... < / стр >
< / див >
< / тяло >
Тук:
- „ md: прекъсване след колона ” клас показва, че трябва да се появи прекъсване на колона след този конкретен
елемент в „ md ” точка на прекъсване (среден размер на екрана).
- „ lg: прекъсване след избягване ” предполага, че елементът трябва да избягва break-after при „ lg ” точка на прекъсване (голям размер на екрана).
Стъпка 2: Проверете изхода
Проверете дали точките на прекъсване и медийните заявки са приложени, като прегледате HTML уеб страницата:
В горната уеб страница прекъсването на колоната е настъпило на посочения елемент на средния екран и прекъсването след е избегнато на големия екран.
Заключение
За да използвате „прекъсването след“ с точки на прекъсване и медийни заявки в Tailwind, първо създайте HTML файл. След това използвайте точките на прекъсване и медийните заявки с помощната програма „прекъсване след“, като посочите различни стойности и стилове за различни размери на екрана. За проверка стартирайте HTML програмата и прегледайте уеб страницата. Тази статия демонстрира метода за използване на „прекъсването след“ с точки на прекъсване и медийни заявки в Tailwind CSS.