В Tailwind CSS « коробка-украшение-брейк » определяет визуализацию фона, границы и заполнения элемента, когда он охватывает несколько строк или столбцов. Он имеет два класса, т. Е. « кусочек ' и ' клон ». Пользователи могут использовать свойство box-decoration-break с точками останова и медиа-запросами, чтобы определить, как макет и внешний вид элементов изменяются в зависимости от ширины устройства, и применять различные стили на основе точек останова.
В этой статье будет продемонстрирован метод использования разрыва оформления блока с точками останова и медиа-запросами.
Как использовать разрыв оформления коробки с точками останова и медиа-запросами в Tailwind?
Чтобы использовать разрыв оформления блока с точками останова и медиа-запросами, необходимо определить разные значения и стили для разных размеров экрана в программе HTML. Затем просмотрите веб-страницу, запустив программу HTML для проверки.
Для лучшего понимания ознакомьтесь с приведенными ниже шагами:
Шаг 1. Используйте точки останова и медиа-запросы с перерывом на оформление коробки
Создайте программу HTML и укажите разные значения и стили для разных размеров экрана. Например, мы определили « Мэриленд ' и ' LG ” точки останова с их стилями:
< тело >< охватывать сорт '=' 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Привет < бр />
линукс < бр />
Намекать
охватывать >
тело >
Здесь:
- “ бг-бирюзовый-600 » устанавливает бирюзовый цвет в качестве фона.
- “ коробка-украшение-клон ” — это пользовательский класс, используемый для клонирования оформления коробки.
- “ md:bg-желтый-500 ” применяет желтый цвет фона к элементу для “ Мэриленд ” точка останова (экраны среднего размера).
- “ lg:коробка-украшение-срез ” задает эффект нарезки для украшения коробки для “ LG ” точка останова (большие экраны).
- “ текст-белый ” задает белый цвет для текста.
- “ текст-3xl » устанавливает размер шрифта 3xl.
- “ px-2 » добавляет горизонтальный отступ в 2 пикселя к элементу .
Шаг 2: проверьте вывод
Чтобы убедиться, что точки останова и мультимедийные запросы успешно применены, запустите программу HTML и просмотрите веб-страницу:
Видно, что меняется веб-страница, в соответствии с которой были определены точки останова и медиа-запросы.
Заключение
Чтобы использовать разрыв оформления блока с точками останова и медиа-запросами в Tailwind, сначала создайте файл HTML. Затем используйте точки останова и мультимедийные запросы в программе HTML, указав разные значения и стили для разных размеров экрана. Для проверки запустите программу HTML и просмотрите веб-страницу. В этой статье продемонстрирован метод использования разрыва оформления блока с точками останова и медиа-запросами.