Ao projetar um site responsivo, o Tailwind “ Pontos de interrupção ' e ' Consultas de mídia ”desempenham um papel fundamental na aplicação de múltiplas funcionalidades que podem ser adaptadas convenientemente a diferentes tamanhos de tela. Esses recursos devem ser especificados por meio de várias classes, ou seja, “ md (telas de tamanho médio)”, “lg(tela de tamanho grande)” ou através do “@media ”Regra que anexa as funcionalidades com base na condição especificada.
Este artigo cobre o seguinte conteúdo:
- Como aplicar espessura de decoração de texto com pontos de interrupção do Tailwind e consultas de mídia?
- Aplicando a espessura da decoração de texto com pontos de interrupção do Tailwind.
- Aplicando a espessura da decoração de texto com consultas de mídia Tailwind.
Como aplicar espessura de decoração de texto com pontos de interrupção do Tailwind e consultas de mídia?
O ' Espessura da decoração do texto ”Pode ser aplicado com a ajuda do“ espessura da decoração do texto ”Propriedade seguida pelo valor da espessura alvo em pixels. Esses pixels podem ser “ 1px”, “2px”, “4px” ou “8px” ”. O ' Pontos de interrupção ”São aplicados para adaptar diversas funcionalidades aplicadas de acordo com o tamanho da tela do usuário utilizando o botão “ md (telas de tamanho médio)”, “lg (tela de tamanho grande) ”aulas, etc. Consultas de mídia ” habilita estilos de implementação condicional com base em um conjunto de parâmetros do navegador e do sistema operacional por meio do “@ meios de comunicação ' regra.
Exemplo 1: Aplicando a espessura da decoração do texto com pontos de interrupção do Tailwind
Este exemplo define a espessura da decoração do texto em diferentes pontos para aplicar o estilo que varia de acordo com o tamanho da tela:
< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< título >< / título >
< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >
< / cabeça >
< corpo >
< área de texto aula = 'sublinhado md:decoration-8 lg:box-decoration-slice text-black text-2xl' eu ia = 'temperatura' > Este é o Linuxhint < / área de texto >
< / corpo >
< / HTML >
De acordo com este trecho de código, aplique as etapas abaixo:
- Primeiro, inclua o caminho CDN para aplicar as funcionalidades do Tailwind.
- Em seguida, faça um “< área de texto >” elemento e incorporar os níveis de espessura de decoração de texto indicados nas telas padrão e médias por meio do “ médico ”classe, respectivamente.
- O ' texto-preto ' e ' texto-2xl ”as classes alocam a cor (preto) e o tamanho da fonte, ou seja, 2xl ao texto, respectivamente.
Saída
A partir deste resultado, pode-se sugerir que a espessura da decoração do texto é adaptada de forma adequada aos vários tamanhos de tela.
Exemplo 2: Aplicando a espessura da decoração do texto com consultas de mídia Tailwind
O '@ meios de comunicação ”A regra é utilizada em consultas de mídia para implementar vários estilos para diferentes tipos/dispositivos de mídia. Esta demonstração específica usa essas consultas de mídia para decorar a espessura do texto com base em um parâmetro/condição especificado:
< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< título >< / título >
< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >
< / cabeça >
< corpo >
< h1 eu ia = 'temperatura' >Isso é Linuxhint< / h1 >
< / corpo >
< / HTML >
< estilo tipo = 'texto/css' >
#temp {
decoração de texto: sublinhado;
texto- alinhar : Centro;
}
@ meios de comunicação ( máximo- largura :550px ) {
#temp {
espessura da decoração do texto: 4px;
} }
< / estilo >
Neste bloco de código, considere as metodologias fornecidas abaixo:
- Da mesma forma, inclua o caminho CDN.
- Em seguida, adicione um “< h1 >” elemento com o “id” declarado.
- Na parte CSS do código, dentro do “< estilo >” tag, estilize o título incluído.
- Além disso, crie o “@ meios de comunicação ”Regra que aplica uma condição tal que, desde que a largura da tela seja“ 550 pixels ”, a espessura da decoração do texto é definida como “ 4 ' píxeis.
- É tal que após a largura da tela ultrapassar esse limite, o texto ficará simplesmente sublinhado.
Saída
Este resultado significa que a regra “@media”, ou seja, Media Queries é aplicada de acordo com a largura da tela.
Conclusão
Os Breakpoints e Media Queries podem ser aplicados com espessura de decoração de texto para exibir as funcionalidades aplicadas de acordo com o tamanho da tela do usuário utilizando diversas classes como “ MD', 'lg ”Ou através do“@ meios de comunicação ”Regra, respectivamente. A última abordagem é especificada no “ CSS ”código que invoca o elemento de destino e o decora com base no parâmetro/condição definido. Este guia elaborou a aplicação de espessura de decoração de texto com Tailwind Breakpoint e Media Queries.