8

Como faço para que o meu texto aumente ou diminua juntamente com a dimensão da tela? Li um pouco sobre rem, mas não entendi muito bem.
Na verdade nem sei se isso se aplica ao caso.

2
  • Se é aumentar automaticamente, voce está procurando CSS media queries. Se for conforme o nível de zoom (caso comum aonde rem e em se aplicam) olhe minha segunda opção. Ela é complicada mas é excelente para layouts e textos flexíveis sem quebrar o layout. Commented 11/02/2014 às 16:35
  • Veja se o exemplo deste link atende journey.dev.br/article/a0300400001 Commented 2/05/2021 às 14:54

5 Respostas 5

8

Automaticamente com tamanho de tela

Acesse essa documentação do MDN sobre CSS media queries. Como não detalhou exatamente os pontos de corte, fica complicado dar um exemplo prático e genérico demais. Porém o link acima explica muito bem como fazer isso.

Para permitir que aumente com zoom do scroll (acessibilidade)

Em poucas palavras, um modo de fazer isso é definir um tamanho base do body apenas uma vez em px (por exemplo, 16px), e a partir daí, toda e qualquer alteração de fonte ou então de tamanho de tela, até mesmo as larguras e alturas de elementos, deveriam ser definidas em em.

Isso também é uma questão de acessibilidade. Usar fontes fixas, em especial em navegadores mais antigos, impedia que a pessoa usasse o aumentar natural do navegador.

O bom de definir em em ou outra unidade que seja relativa e não fixa, é que ao aumentar o zoom da página ela reage como se o tamanho da tela ficasse com largura menor pelo ponto de vista responsívo. Uma pessoa em um computador com uma tela Full HD que aumentar o zoom muito irá ver o site como se estivesse acessando de um celular, o que é bem interessante se comparado a simplesmente só aumentar a fonte e os blocos de caixas com tamanho fixo não aumentarem e ficar uma bagunça.

Reparem que alguns navegadores modernos podem até permitir um efeito parecido ao aumentar o zoom mesmo que as unidades usadas não sejam em em ou outra unidade relativa, mas em algumas versões mais antigas isso não funciona.

1
  • Opa, legal sua resposta, mas já ia comentar que nos navegadores modernos já funciona o zoom mesmo usando pixels pras unidades. Entretanto, fica muito mais fácil ajustar as fontes via media queries utlizando REM e colocando uma base pro elemento html.
    – marciop
    Commented 13/08/2014 às 19:19
6

Tenho duas opções.

1) Você pode usar um plugin para fazer isso, aqui tem um:

FLOW TYPE

2) Você pode fazer isso com media queries, onde você consegue definir em qual largura vai haver modificação, por exemplo:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
    p{
        font-size: 10px;
    }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    p{
        font-size: 12px;
    }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    p{
        font-size: 14px;
    }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    p{
        font-size: 9px;
    }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    p{
        font-size: 7px;
    }
}
2

Basta utilizar CSS que este já resolve desta maneira:

@media only screen and (min-width : 1550px)
{ css para este tamanho }

@media only screen and (min-width : 1400px) and (max-width : 1549px)
{ css para este tamanho}
2
  • Só no Window Resizer temos 10 dimensões diferentes para diferentes dispositivos. Torna-se custoso fazer diferentes estilos para essa variedade de dimensões. A ideia é fazer uma página adaptativa até certo ponto, no qual fique ruim de visualizar. Commented 11/02/2014 às 16:30
  • escolha as telas que quer atender, pois com media queries é o jeito mais concreto que conheço, independente de navegador
    – Paulo Lima
    Commented 11/02/2014 às 16:41
-3

Utilize font-size: 62.5% no .body depois basta usar o seguinte, para uma fonte de 16px, use 1.6em, para 24px, 2.4em, etc...

1
  • Isto não fornece uma resposta à pergunta o autor pediu uma explicação dos casos de uso das unidades CSS. Você fez uma mera citação que ficaria melhor como um comentário abaixo da publicação dele. Commented 30/01/2020 às 7:14
-3

Você pode usar a função clamp() do css.

p {
  font-size: clamp(1em, 1em + 1vw, 1.5em);
}

Na prática, o que está acontecendo é: o tamanho da fonte especificado é 1em + 1vw, mas ele nunca será menor que 1em, nem maior que 1.5em.

Aqui, você encontra um ótimo tutorial sobre o assunto: https://desenvolvimentoparaweb.com/css/textos-responsivos-com-css-clamp/

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .