В этом блоге будет продемонстрирован процесс применения медиа-запросов и точек останова с помощью утилиты прокрутки в Tailwind.
Как применять медиа-запросы и точки останова с прокруткой в Tailwind?
Чтобы применить точки останова или медиа-запросы с другим названием, когда дело касается CSS, с помощью « прокручивать ' полезность. HTML-программа создается и применяет различные точки останова. см ', ' Мэриленд ' или ' LG » с подходящими классами утилит из утилиты «overscroll». Он меняет поведение прокрутки элементов на экранах разных размеров.
Шаг 1. Используйте точки останова и медиа-запросы в HTML-коде.
Создайте HTML-документ и примените точки останова, которые представляют собой размеры экрана и медиа-запросы для каждой точки останова. Например ' Мэриленд ' и ' LG Точки останова используются в приведенном ниже коде для размера текста, и к нему применяется поведение чрезмерной прокрутки:
< тело сорт '=' 'бг-шифер-500' >
< делитель сорт '=' 'text-red-900 p-4 lg:p-8' >
< п сорт '=' 'относительный md:абсолютный md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none lg:text-xl lg:static lg:translate-x-4 lg :translate-y-4 ' > Этот текст будет иметь разные размеры шрифта в зависимости от размера экрана. Это будет меньше на маленьких экранах , середина - размер на средних экранах , и больше на больших экранах. п >
делитель >
тело >
В этом коде:
- « bg-slate-500 » устанавливает серый цвет фона.
- « текст-красный-900 » меняет цвет текста на красный.
- « р-4 » добавляет отступ в 4 пикселя.
- « LG: P-8 » добавляет отступ в 8 пикселей на больших экранах.
- Исходное положение « <р> Тег « устанавливается относительно родительской страницы с помощью тега « родственник ' сорт.
- « мкр:абсолютный » измените положение текста с относительного на абсолютное на экране среднего размера.
- « md: прокрутка-содержать ” гарантирует, что поведение «чрезмерной прокрутки» содержится внутри этого элемента, а не влияет на всю страницу, когда экран среднего размера.
- « мд:текст-LG » делает текст большим на экране среднего размера.
- « мд:перевести-x-4 ' и ' мд:перевести-y-4 «переместить текст» 4 пикселя » вниз и вправо на экране среднего размера.
- « LG: прокрутка-нет » устанавливает « прокручивать ” для свойства none на экране большого размера.
- « LG:текст-XL » изменяет размер текста на очень большой для экрана большого размера.
- « LG:статический ” изменяет положение текста относительно родительской страницы с абсолютного на статическое для экрана большого размера
- « LG:перевести-x-4 ' и ' LG:перевести-y-4 На большом экране переместите текст на 4 пикселя вниз и вправо.
Шаг 2. Предварительный просмотр вывода
Теперь просмотрите веб-страницу, созданную путем выполнения приведенного выше HTML-кода, и измените размер экрана HTML-сайта, чтобы увидеть видимые изменения:
На приведенном выше экране « прокручивать » поведение видно, и, уменьшив размер экрана, можно увидеть, что размер текста изменяется в зависимости от примененных к нему медиа-запросов.
Заключение
Чтобы применить медиа-запросы и точки останова с помощью « прокручивать » укажите точки останова с каким-либо нужным классом из утилиты «overscroll». Изменяя размер экрана, медиа-запросы корректируют вывод на экран. В этом блоге продемонстрирован процесс применения медиа-запросов и точек останова с поведением «чрезмерной прокрутки» в Tailwind.