Este artigo fornecerá o procedimento para aplicar altura mínima e altura máxima em pontos de interrupção e consultas de mídia do Tailwind usando o seguinte esquema:
- Configurando a propriedade Min-height em pontos de interrupção do Tailwind e consultas de mídia
- Configurando a propriedade Max-height em pontos de interrupção do Tailwind e consultas de mídia
Como definir a propriedade de altura mínima no ponto de interrupção do Tailwind e nas consultas de mídia?
Tailwind fornece pontos de interrupção padrão e consultas de mídia para tornar o design responsivo a diferentes tamanhos de tela. As propriedades fornecidas aos pontos de interrupção são aplicadas quando o tamanho de tela especificado é atingido. A largura mínima para esses pontos de interrupção padrão é descrita a seguir:
- sm: Largura mínima de “640px”.
- médico: Largura mínima de “768px”.
- lg: Largura mínima de “1024px”.
- XL: Largura mínima de “1280px”.
- 2xl: Largura mínima de “1536px”.
A propriedade min-height define o limite inferior para a altura de um elemento. Isso significa que especifica a altura mínima que um elemento pode possuir. Para usar a propriedade min-height com os pontos de interrupção no Tailwind, a seguinte sintaxe é usada:
< divisão aula = '{prefixo do ponto de interrupção}:min-h-{valor}...' > < / divisão >
Vamos usar a sintaxe definida acima em uma demonstração para entender melhor. Neste exemplo, o limite mínimo de altura para o elemento aumentará no “ médico ”ponto de interrupção. Isso resultará no aumento da altura geral do elemento.
< divisão aula = 'h-48 w-48 round-md bg-green-500 text-center md:min-h-screen' > Aumentar a tela Tamanho para aumentar a altura mínima< / divisão >
A explicação para o código acima é a seguinte:
- O ' h-48 ”A classe fornece uma altura de 192px para o elemento div.
- O ' w-48 ”A classe fornece uma altura de 192px para o elemento div.
- O ' MD arredondado ”A classe fornece o canto arredondado para o elemento div.
- O ' bg-{cor}-{número} ”A classe fornece a cor especificada para o plano de fundo do elemento div.
- O ' centro de texto ”Classe posiciona o elemento de texto no centro do elemento div.
- O ' md:min-h-tela ”A classe aumentará o limite mínimo de altura igual a 100% da altura da tela.
Saída:
Pode-se ver na saída que quando o “ médico ”O tamanho da tela for atendido, o elemento obterá 100% da altura da tela. Isso acontece porque o limite mínimo de altura para o “ médico ”O ponto de interrupção é definido como igual à altura da tela:
Como definir a propriedade Max-height no ponto de interrupção do Tailwind e consultas de mídia?
A classe de altura máxima define o limite superior para a propriedade height no Tailwind. Isso significa que especifica a altura máxima que um elemento pode possuir. A sintaxe para usar a classe de altura mínima com pontos de interrupção é a seguinte:
< divisão aula = '{prefixo do ponto de interrupção}:max-h-{tamanho}...' > < / divisão >Vamos usar a sintaxe definida acima em uma demonstração para entender melhor. Neste exemplo, o elemento receberá um limite máximo de altura específico para o “ médico ”ponto de interrupção. Isso restringirá a altura padrão fornecida ao elemento.
< divisão aula = 'h-96 w-48 arredondado-md bg-green-500 text-center md:max-h-60' > Aumentar a tela Tamanho para aumentar a altura mínima< / divisão >Observe que no código acima, a altura padrão de um elemento é fornecida com “h-96”, ou seja, 384px. No entanto, essa altura diminui para “240px” quando o ponto de interrupção “md” é atingido. Isto se deve ao “ md:máx-h-60 ' aula.
Saída:
Na saída abaixo, pode-se ver claramente que uma vez que o tamanho da tela atinge “ médico ”Ponto de interrupção, a altura do elemento fica menor.
Trata-se de definir a propriedade de altura mínima e máxima com pontos de interrupção do Tailwind.
Conclusão
Para definir a propriedade de altura máxima com os pontos de interrupção e consultas de mídia do Tailwind, o “ {prefixo do ponto de interrupção}:max-h-{tamanho} ”classe é usada. Da mesma forma, para definir a propriedade de altura mínima com os pontos de interrupção do Tailwind, o “ {prefixo do ponto de interrupção}:min-h-{tamanho} ”classe é usada. Este artigo forneceu o procedimento para aplicar propriedades min e max-height a pontos de interrupção e consultas de mídia no Tailwind.