В этой статье будет показан метод использования адаптивных точек останова в Tailwind CSS.
Как использовать адаптивные точки останова в Tailwind?
Чтобы использовать адаптивные точки останова в Tailwind, используйте адаптивные модификаторы, такие как « см », « Мэриленд », « LG », « XL ' и ' 2XL ” с другими классами в программе HTML. Затем просмотрите веб-страницу в формате HTML и измените размер экрана, чтобы убедиться, что точки останова работают правильно.
Шаг 1: Используйте адаптивные модификаторы в HTML-программе
Создайте HTML-программу и используйте адаптивные модификаторы с желаемым стилем. Например, мы использовали « см », « Мэриленд », « LG », « XL ' и ' 2XL адаптивные модификаторы:
< тело >
< див сорт '=' 'h-экран bg-фуксия-400 sm:bg-розовый-600 md:bg-зеленый-700 lg:bg-фиолетовый-500 xl:bg-бирюзовый-600 2xl:bg-желтый-500' >
< h1 сорт '=' 'текст-7xl текст-белый текст-центр p-20' > Подсказка для Linux < / h1 >
< / див >
< / тело >
Здесь:
- “ бг-фуксия-400 » устанавливает цвет фона к фуксии.
- “ см: бг-розовый-600 ” применяет розовый цвет к фону для маленьких экранов.
- “ md:bg-зеленый-700 ” изменяет цвет фона на зеленый на средних экранах.
- “ lg:bg-фиолетовый-50 » устанавливает фиолетовый цвет фона для больших экранов.
- “ xl:bg-бирюзовый-600 ” применяет бирюзовый цвет к фону для очень больших экранов.
- “ 2xl:bg-желтый-500 ” изменяет цвет фона на желтый на экранах 2xl.
Шаг 2: проверьте вывод
Просмотрите веб-страницу HTML, чтобы проверить, правильно ли работают адаптивные точки останова:
На приведенной выше веб-странице можно заметить, что цвет веб-страницы меняется в зависимости от размера экрана, в соответствии с которым были указаны точки останова.
Заключение
Чтобы использовать адаптивные точки останова в Tailwind, используйте адаптивные модификаторы, такие как « см », « Мэриленд », « LG », « XL ' и ' 2XL ” с другими классами в программе HTML. Эти модификаторы используются для применения различных стилей к определенному элементу в зависимости от размера экрана. Эта статья иллюстрирует метод использования адаптивных точек останова в Tailwind CSS.