Como criar fonte responsiva no CSS
A capacidade de resposta é um fator essencial nos aplicativos da Web. Os desenvolvedores fazem designs, imagens e divs responsivos nas páginas da web; No entanto, existem apenas alguns que pensam em fazer a capacidade de resposta das fontes. Porque quando a página é alterada de um dispositivo para outro, como da área de trabalho para o celular, pode perturbar a legibilidade da fonte. Para tornar as fontes visíveis, o fator de capacidade de resposta deve ser adicionado.
Este artigo explicará como criar fontes responsivas usando CSS.
Como criar fonte responsiva no CSS?
Para criar uma fonte responsiva no CSS, utilizaremos os seguintes métodos:
-
- Unidades de viewport
- Consultas de mídia
- função clamp ()
Vamos seguir em frente e explorar cada método individualmente!
Método 1: Usando unidades de viewport para criar fontes responsivas no CSS
A página da página de um navegador é conhecida como uma viewport. No CSS, algumas unidades estão relacionadas a ele, logo conhecidas como “unidades de viewport”. Essas unidades são úteis para tornar as coisas responsivas e melhorando a visibilidade em relação a um espectador.
Aqui estão quatro unidades de viewport descritas abaixo:
| Valores | Descrição |
| vw | VW representa a largura da viewport. Torna os elementos responsivos em maneiras de largura em relação a uma página. 1% da página é equivalente a 1VW. |
| vh | VH representa a altura da viewport. Torna os elementos responsivos em maneiras de altura em relação a uma página. 1% da página é equivalente a 1VH. |
| vmin | VMIN representa o mínimo de viewport. É usado para especificar a altura ou largura mínima da viewport em relação a um elemento. |
| vmax | Vmax representa o máximo de viewport. É usado para especificar a altura ou largura máxima da viewport em relação a um elemento. |
Vamos dar um exemplo para reconhecer o funcionamento da unidade de viewport.
Exemplo
Em nosso arquivo html, escreva algum texto no “ Html Linux Dica CSS Método 2: Usando consultas de mídia para criar fontes responsivas no CSS No CSS, “consultas de mídia”Ajude a aplicar diferentes condições de estilo em elementos específicos. É um conjunto de regras que só pode ser aplicado se a condição definida for verdadeira. No desenvolvimento, as consultas de mídia são frequentemente usadas para tornar elementos ou projetos responsivos em relação aos dispositivos/tipos de mídia. Quando a propriedade do tamanho da fonte é colocada dentro do conjunto de regras @media, ela atinge os resultados desejados. Exemplo Defina a página mínima da página como “799px" usando "@meios de comunicação”E adicione o elemento dentro deste conjunto de regras. Isso indica que a regra definida será aplicada apenas se a largura da página for igual ou superior a 799px. Agora, especifique o “tamanho da fonte"Propriedade como"20px”. Isso tornará a fonte maior que o tamanho normal. CSS Método 3: Usando CLAMP () para criar fontes responsivas no CSS O "grampo ()”A função é utilizada para especificar um valor mínimo e máximo fixo. Em outras palavras, é comumente definido como um intervalo inicial e final para um valor específico. A função Clamp () fornece um grande controle sobre os elementos relacionados à sua capacidade de resposta. Exemplo Usar "tamanho da fonte”Propriedade ao longo do valor“grampo (10px, 2.5VW, 30px)”Onde o 10px é o valor mínimo, 30px é o máximo e o 2.5VW é o valor atual da fonte selecionada. Esta função tornará a fonte responsiva sob os limites definidos. CSS Conclusão Para criar uma fonte responsiva, “unidades de viewport","consultas de mídia" ou "função clamp ()" pode ser usado. Existem quatro unidades de viewports VW, VH, VMIN e VMAX que ajudam a criar fontes responsivas. Além disso, o CSS @media também é usado para aplicar diferentes condições de estilo a elementos específicos. A função Clamp () também pode ser utilizada para tornar as fontes responsivas. Neste artigo, abordamos como criar fontes responsivas no CSS.
No arquivo CSS, especifique o “tamanho da fonte”Propriedade com o valor“2.5VW”. Isso tornará a fonte responsiva em relação à largura da página.P
Size da fonte: 2.5VW;
Salve seu código e teste -o em seu navegador:@media (largura min: 799px)
P
Size da fonte: 20px;
SaídaP
Size da fonte: grampo (10px, 2.5VW, 30px);
Saída
Descrevemos três métodos eficientes para criar uma fonte responsiva no CSS.