В этой статье будет показан метод применения точек останова и медиа-запросов к сетке строк в Tailwind CSS.
Как применить точки останова и медиа-запросы к сетке строк в Tailwind?
Чтобы применить точки останова и медиа-запросы к сетке строк в Tailwind, создайте программу HTML. Затем определите количество строк для различных размеров экрана, используя « см », « Мэриленд ' или ' LG ” точки останова с “ сетка-строки-<значение> коммунальные услуги. Затем обеспечьте изменения на веб-странице, отрегулировав размер экрана.
Рассмотрим практическую реализацию:
Шаг 1. Используйте точки останова и медиа-запросы с сеткой строк в программе HTML
Создайте программу HTML и определите количество строк для разных размеров экрана с помощью « сетка-строки-<значение> ' полезность. Например, мы использовали « Мэриленд ” точка останова с “ сетка-строки-3 «полезность» и « LG ” точки останова с “ сетка-строки-5 утилиты для изменения количества строк на разных размерах экрана:
< тело >
< див сорт '=' 'сетка сетка-строки-2 md: сетка-строки-3 lg: сетка-строки-5 сетка-поток-столбец пробел-3 м-3 текст-центр' >
< див сорт '=' 'бг-чирок-500 п-5' > 1 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 2 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 3 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 4 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 5 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 6 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 7 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 8 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 9 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 10 < / див >
< / див >
< / тело >
Здесь:
- “ сетка ” используется для создания макета сетки.
- “ сетка-строки-2 ” указывает, что сетка должна иметь 2 строки одинакового размера.
- “ md: сетка-строки-3 ” изменяет сетку на 3 строки одинакового размера на экране среднего размера.
- “ LG: сетка-строки-5 ” изменяет сетку на 5 строк одинакового размера на большом экране.
- “ сетка-поток-столбец ” размещает элементы сетки горизонтально в столбцах.
- “ разрыв-3 ” устанавливает интервал в 3 единицы между каждым элементом сетки.
- “ м-3 ” применяет отступ в 3 единицы вокруг контейнера сетки.
- “ текстовый центр » устанавливает текст каждого элемента сетки в центр.
- “ бг-бирюзовый-500 » задает бирюзовый цвет для фона элементов сетки.
- “ р-5 » добавляет отступ в 5 единиц к содержимому внутри дочернего элемента.
предметы.
Шаг 2: проверьте вывод
Чтобы убедиться, что точки останова и мультимедийные запросы были применены к сетке строк, просмотрите веб-страницу HTML, изменив размер экрана:
В приведенном выше выводе видно, что количество строк меняется в зависимости от размера экрана. Это указывает на то, что точки останова и медиа-запросы были успешно применены к сетке строк.
Заключение
Чтобы применить точки останова и медиа-запросы к сетке строк в Tailwind, определите количество строк для различных размеров экрана, используя « см », « Мэриленд ' или ' LG ” точки останова с “ сетка-строки-<значение> коммунальные услуги. Затем обеспечьте изменения на веб-странице, изменив размер экрана. В этой статье продемонстрирован метод применения точек останова и медиа-запросов к сетке строк в Tailwind CSS.