При разработке адаптивного веб-сайта компания Tailwind Контрольные точки ' и ' Медиа-запросы » играют ключевую роль в применении множества функций, которые можно удобно адаптировать к экранам разных размеров. Эти функции должны быть определены через различные классы, т.е. « md (экраны среднего размера)», «lg(экран большого размера)» или через «@media правило, которое добавляет функциональные возможности на основе указанного условия.
Эта статья охватывает следующее содержание:
- Как применить толщину оформления текста с помощью точек останова попутного ветра и медиа-запросов?
- Применение толщины оформления текста с контрольными точками попутного ветра.
- Применение толщины оформления текста с помощью медиа-запросов Tailwind.
Как применить толщину оформления текста с помощью точек останова попутного ветра и медиа-запросов?
« Оформление текста Толщина » можно применить с помощью « толщина текста-декорации », за которым следует целевое значение толщины в пикселях. Эти пиксели могут быть « 1px», «2px», «4px» или «8px» ». « Контрольные точки » применяются для адаптации различных прикладных функций в соответствии с размером экрана пользователя с помощью « md (экраны среднего размера)», «lg(экран большого размера) » занятия и т. д. Медиа-запросы включить стили условной реализации на основе набора параметров браузера и ОС через «@» СМИ правило.
Пример 1. Применение толщины оформления текста с помощью точек останова попутного ветра
В этом примере задается толщина оформления текста в разных точках, чтобы применить стиль, который варьируется в зависимости от размера экрана:
< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< заголовок >< / заголовок >
< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >
< / голова >
< тело >
< текстовая область сорт '=' 'подчеркнуть md:decoration-8 lg:box-decoration-slice text-black text-2xl' идентификатор '=' 'температура' > Это Линуксхинт < / текстовая область >
< / тело >
< / HTML >
В соответствии с этим фрагментом кода примените следующие шаги:
- Сначала укажите путь CDN, чтобы применить функции Tailwind.
- Затем создайте «< текстовая область >» и включить указанные уровни толщины оформления текста на экранах по умолчанию и на средних экранах с помощью элемента « Мэриленд класс соответственно.
- « текст-черный ' и ' текст-2xl Классы присваивают тексту цвет (черный) и размер шрифта, т. е. 2xl, соответственно.
Выход
Из этого можно сделать вывод, что толщина оформления текста соответствующим образом адаптируется к изменяющемуся размеру экрана.
Пример 2. Применение толщины оформления текста с помощью медиа-запросов Tailwind
«@ СМИ Правило «используется в медиа-запросах для реализации различных стилей для разных типов мультимедиа/устройств. В этой конкретной демонстрации эти медиа-запросы используются для украшения толщины текста на основе указанного параметра/условия:
< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< заголовок >< / заголовок >
< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >
< / голова >
< тело >
< ч1 идентификатор '=' 'температура' >Это Linuxhint< / ч1 >
< / тело >
< / HTML >
< стиль тип '=' 'текст/css' >
#temp {
оформление текста: подчеркивание;
текст- выровнять : центр;
}
@ СМИ ( Макс- ширина :550 пикселей ) {
#temp {
толщина текста-декорации: 4 пикселя;
} }
< / стиль >
В этом блоке кода рассмотрим приведенные ниже методологии:
- Аналогичным образом укажите путь CDN.
- Затем добавьте «< ч1 >» элемент с указанным «id».
- В CSS-части кода, внутри «< стиль >», задайте стиль включенному заголовку.
- Также создайте «@ СМИ ” правило, которое применяет такое условие, что пока ширина экрана равна “ 550 пикселей », толщина текста-декорации установлена на « 4 » пикселей.
- Оно такое, что после того, как ширина экрана превысит этот предел, текст будет просто подчеркнут.
Выход
Этот результат означает, что правило «@media», то есть медиа-запросы, применяется в соответствии с шириной экрана.
Заключение
Точки останова и медиа-запросы могут применяться с толщиной оформления текста для отображения применяемых функций в соответствии с размером экрана пользователя с использованием различных классов, таких как « мд', 'лг » или через «@ СМИ правило соответственно. Последний подход указан в « CSS ” код, который вызывает целевой элемент и украшает его на основе заданного параметра/условия. В этом руководстве подробно описано применение толщины оформления текста с помощью точки останова Tailwind и медиа-запросов.