В этой статье будет описана процедура применения минимальной и максимальной высоты к точкам останова Tailwind и медиа-запросам, используя следующую схему:
- Установка свойства минимальной высоты в точках останова попутного ветра и медиа-запросах
- Настройка свойства максимальной высоты в точках останова попутного ветра и медиа-запросах
Как установить свойство минимальной высоты для точки останова Tailwind и медиа-запросов?
Tailwind предоставляет точки останова по умолчанию и медиа-запросы, чтобы сделать дизайн адаптивным для экранов разных размеров. Свойства, предоставленные точкам останова, применяются при достижении указанного размера экрана. Минимальная ширина для этих точек останова по умолчанию описывается следующим образом:
- см: Минимальная ширина «640 пикселей».
- мкр: Минимальная ширина «768 пикселей».
- LG: Минимальная ширина «1024 пикселей».
- хл: Минимальная ширина «1280 пикселей».
- 2xl: Минимальная ширина «1536 пикселей».
Свойство min-height устанавливает нижний предел высоты элемента. Это означает, что он определяет минимальную высоту, которую может иметь элемент. Чтобы использовать свойство min-height с точками останова в Tailwind, используется следующий синтаксис:
< div сорт '=' '{префикс точки останова}:мин-ч-{значение}...' > < / div >
Давайте воспользуемся определенным выше синтаксисом в демонстрации, чтобы лучше понять. В этом примере минимальный предел высоты элемента увеличится на « Мэриленд » точка останова. Это приведет к увеличению общей высоты элемента.
< div сорт '=' 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Увеличить экран Размер Увеличить минимальную высоту< / div >
Объяснение приведенного выше кода следующее:
- « х-48 Класс ” обеспечивает высоту элемента div 192 пикселя.
- « w-48 Класс ” обеспечивает высоту элемента div 192 пикселя.
- « округлый-MD Класс ” обеспечивает закругленный угол элемента div.
- « bg-{цвет}-{число} Класс ” обеспечивает указанный цвет фона элемента div.
- « текстовый центр Класс позиционирует текстовый элемент в центр элемента div.
- « мд:мин-ч-экран » увеличит минимальный предел высоты, равный 100% высоте экрана.
Выход:
Из выходных данных видно, что когда « Мэриленд » размер экрана соблюден, элемент получит 100% высоты экрана. Это происходит потому, что минимальный предел высоты для « Мэриленд Точка останова устанавливается равной высоте экрана:
Как установить свойство максимальной высоты для точки останова Tailwind и медиа-запросов?
Класс максимальной высоты устанавливает верхний предел свойства высоты в Tailwind. Это означает, что он определяет максимальную высоту, которую может иметь элемент. Синтаксис использования класса минимальной высоты с точками останова следующий:
< div сорт '=' '{префикс точки останова}:max-h-{размер}...' > < / div >Давайте воспользуемся определенным выше синтаксисом в демонстрации, чтобы лучше понять. В этом примере элементу будет предоставлен определенный максимальный предел высоты для « Мэриленд » точка останова. Это сузит высоту по умолчанию, предоставленную элементу.
< div сорт '=' 'h-96 w-48 округлый-md bg-green-500 text-center md:max-h-60' >Увеличить экран Размер Увеличить минимальную высоту< / div >Обратите внимание, что в приведенном выше коде высота элемента по умолчанию указана как «h-96», то есть 384 пикселя. Однако эта высота сужается до «240 пикселей», когда достигается точка останова «md». Это связано с тем, что « мд:макс-ч-60 ' сорт.
Выход:
На приведенном ниже выводе ясно видно, что как только размер экрана достигнет « Мэриленд точки останова, высота элемента становится меньше.
Это все, что касается установки свойства минимальной и максимальной высоты с помощью точек останова Tailwind.
Заключение
Чтобы установить свойство максимальной высоты с помощью точек останова Tailwind и медиа-запросов, {префикс точки останова}:max-h-{размер} используется класс ». Аналогично, чтобы установить свойство минимальной высоты с помощью точек останова Tailwind, {префикс точки останова}:min-h-{размер} используется класс ». В этой статье представлена процедура применения свойств min и max-height к точкам останова и медиа-запросам в Tailwind.