Este blog demonstrará o processo de aplicação de consultas de mídia e pontos de interrupção usando o utilitário overscroll no Tailwind.
Como aplicar consultas de mídia e pontos de interrupção com rolagem excessiva no Tailwind?
Para aplicar os pontos de interrupção ou seus outros nomes de consultas de mídia quando se trata de CSS com o “ rolar demais ' Utilitário. O programa HTML é criado e aplica os diferentes pontos de interrupção “ sm ',' médico ' ou ' LG ”Com as classes de utilitário adequadas do utilitário “overscroll”. Altera o comportamento de rolagem de itens em diferentes tamanhos de tela.
Etapa 1: use os pontos de interrupção e consultas de mídia no código HTML
Crie um documento HTML e aplique os pontos de interrupção que são os tamanhos de tela e consultas de mídia para cada ponto de interrupção. Por exemplo ' médico ' e ' LG ”pontos de interrupção são usados no código abaixo para o tamanho do texto e o comportamento de rolagem é aplicado a ele:
< corpo aula = 'bg-ardósia-500' >
< divisão aula = 'texto-vermelho-900 p-4 lg:p-8' >
< p aula = 'md relativo:md absoluto: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 :traduzir-y-4 ' > Este texto terá tamanhos de fonte diferentes com base no tamanho da tela. Isto será menor em telas pequenas , médio - dimensionado em telas médias , e maior em telas grandes. p >
divisão >
corpo >
Neste código:
- “ bg-ardósia-500 ”define a cor de fundo para cinza.
- “ texto-vermelho-900 ”muda a cor do texto para vermelho.
- “ página-4 ”adiciona um preenchimento de 4px.
- “ LG: p-8 ”adiciona um preenchimento de 8px em telas grandes.
- A posição inicial do “ ”é definida em relação à página pai usando o“ relativo ' aula.
- “ md:absoluto ”alterar a posição do texto de relativo para absoluto em uma tela de tamanho médio.
- “ md:overscroll-conter ”garante que o comportamento de “overscroll” esteja contido nesse elemento em vez de afetar a página inteira quando a tela for de tamanho médio.
- “ md:texto-lg ”torna o texto grande em uma tela de tamanho médio.
- “ md:traduzir-x-4 ' e ' md:traduzir-y-4 ”mover o texto“ 4px ”Para baixo e para a direita em tela de tamanho médio.
- “ lg:overscroll-none ” define o “ rolar demais ”propriedade de classe para none em uma tela grande.
- “ lg:texto-xl ”altera o tamanho do texto para extragrande para uma tela grande.
- “ LG:estático ”altera a posição do texto em relação à página pai de absoluta para estática para uma tela de tamanho grande
- “ lg:traduzir-x-4 ' e ' lg:traduzir-y-4 ”mova o texto 4px para baixo e para a direita em telas grandes.
Etapa 2: visualizar a saída
Agora, visualize a página da web criada executando o código HTML acima e altere o tamanho da tela do site HTML para ver as alterações visíveis:
Na tela acima, o “ rolar demais ”O comportamento é visível e ao diminuir o tamanho da tela pode-se perceber que o tamanho do texto muda pelas consultas de mídia aplicadas a ele.
Conclusão
Para aplicar as consultas de mídia e pontos de interrupção com o “ rolar demais ”Utilitário, especifique os pontos de interrupção com alguma classe desejada do utilitário “overscroll”. Variando o tamanho da tela, as consultas de mídia ajustam a saída da tela. Este blog demonstrou o processo de aplicação de consultas de mídia e pontos de interrupção com comportamento de “overscroll” no Tailwind.