В этой статье объясняется, как использовать точку останова и медиа-запрос в сочетании со свойством позиции в Tailwind.
Как использовать точки останова и медиа-запросы со свойством позиции?
Точки останова — это основные блоки для создания максимально адаптивного дизайна. Он используется для адаптации макета к экранам разных размеров. Медиа-запросы используются для применения определенных стилей к элементам в зависимости от разрешения экрана. Атрибут позиции можно применять вместе с ними, чтобы сделать вывод более оптимизированным.
Шаг 1. Применение свойства Position с точками останова и медиа-запросами
На этом этапе вставляется программа для применения свойства позиции вдоль точек останова или медиа-запросов к выбранному « п элемент:
< тело сорт '=' 'бг-шифер-500' >
< div сорт '=' 'текст-желтый-300 p-4 lg:p-8' >
< п сорт '=' 'относительный md:абсолютный md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > Этот текст будет иметь разные размеры шрифта в зависимости от размера экрана. Он будет меньше на маленьких экранах, среднего размера на средних экранах и больше на больших экранах. < / п >
< / div >
< / тело >
В этом коде:
- « bg-slate-500 » устанавливает серый цвет фона.
- « текст-желтый-300 » меняет цвет текста на желтый.
- « р-4 » добавляет отступ в 4 пикселя.
- « LG: п-8' добавляет отступ размером 8 пикселей на больших экранах.
- Начальная позиция задается относительно родительской страницы с помощью параметра « родственник ' сорт.
- « мд:текст-LG » делает текст большим на экране среднего размера.
- «МД: абсолют» изменяет положение текста с относительного на абсолютное на экране среднего размера.
- « мд:перевести-х-4» и «мд:перевести-y-4» переместите текст на 4 пикселя вниз и вправо на экране среднего размера.
- « LG:текст-XL » изменяет размер текста на очень большой на большом экране.
- « LG:статический ” изменяет положение текста относительно родительской страницы с абсолютного на статическое на экране большого размера
- « LG:перевести-х-4 ' и ' LG:перевести-y-4 » переместите текст на 4 пикселя вниз и вправо на большом экране.
Шаг 2. Проверьте выходные данные
Просмотрите веб-страницу, созданную с помощью приведенного выше кода, и отрегулируйте размер экрана, чтобы увидеть изменения следующим образом:
Видно, что текст демонстрирует отзывчивое поведение на экранах среднего и большого размера.
Заключение
Чтобы использовать точки останова и медиа-запросы в Tailwind, примените точку останова и установите медиа-запрос для каждой точки останова, а также измените свойство позиции в разных точках останова на экране. Разбивка по умолчанию: « см ', ' Мэриленд ', ' LG ', и ' XL ». В этом блоге показано, как использовать точку останова и медиа-запрос со свойством позиции в Tailwind.