-1

Boa tarde, Estou fazendo uma página html e tem uns blocos que são responsivos. Agora preciso que o texto exibido dentro deles tambem seja. Como posso fazer isso?

5
  • Você pode usar o font-size em "em" e setar diferentes tamanhos para diferentes resoluções
    – Leo Letto
    9/12/2016 às 16:38
  • Você pode usar "em", "rem", "vh" ou "vw"
    – RFL
    9/12/2016 às 16:47
  • 1
    Depende do que você chama de "responsivo", essa palavra não quer dizer nada na prática (é apenas um apelido bobo usado por quem não é da área, comumente usado pelo "marketing" para vender sites). Mais fácil explicar exatamente o efeito/resultado desejado e a dificuldade em obter, assim poderá ter respostas técnicas.
    – Largato
    9/12/2016 às 17:22
  • 1
  • 3
    Possível duplicata de Font Responsiva
    – Syzoth
    9/12/2016 às 18:16

2 Respostas 2

3

Uma alternativa para que você tenha total controle do redimensionamento das suas fontes é utilizar as próprias media queries do css:

@media screen and (min-width: 480px) {
    p {font-size: 12px;}
}
@media screen and (min-width: 768px) {
    p {font-size: 16px;}
}
@media screen and (min-width: 1024px) {
    p {font-size: 18px;}
}

Nesse caso você pode criar quantas regras achar necessário.

A segunda opção seria realmente utilizar em. Cada em corresponde ao tamanho atual da fonte, que por default nos browsers é 16px. Ou seja:

p {
    font-size: 1em; //16px
}
h1 {
    font-size: 2em; //32px
}
h2 {
    font-size: 1.5em; //24px;
}
1
1

No padrão EM, 1 EM normalmente equivale a 16 pixels, ou seja, a medida que o browser considera como padrão para textos. Utilizar EM é uma questão de acessibilidade, pois pessoas com dificuldade de leitura podem aumentar e diminuir livremente o tamanho do texto de maneira proporcional. O que dá mais liberdade para o usuário, sem quebrar o seu layout!

Deixo aqui uma opção caso seja interessante para você. Veja que 16 pixels = 100%, 10 pixels é igual a 62.5%. (16 x 0.625 = 10). Caso queira torna bem mais fácil calcular os valores a partir de uma base decimal. É possível definir o body com valor font-size: 62.5% como padrão para todo o documento. Assim fazer com que 1em passa a ser equivalente a 10px

Então ficaria assim:

body {
  font-size: 62.5%;
}

.bloco {
  width: 100%; 
}
.bloco p {
  font-size: 1em; /* Conforme explicado acima, seria equivalente a 10px */
}

Um texto de 12px, por exemplo, seria equivalente a 1.2em(Leia a explicação acima). Já um header com 36px seria equivalente a 3.6em(Leia a explicação acima).

Resolvi compartilhar esta solução que havia aplicado num projeto com necessidades relacionado à texto responsivo, aumentar e diminuir livremente o tamanho do texto de maneira proporcional.

9
  • Fera: 1em = 16px, 1.6em = 25.6px 9/12/2016 às 17:12
  • Olá, sim! Só para deixar 'redondo', redefinindo o font-size no body com font-size: 62.5%; 16 pixels = 100%, 10 pixels é igual a 62.5%. (16 x 0.625 = 10). Então é só definir este valor como padrão para todo o documento. Utilizando esta regrinha 1em passa a ser equivalente a 10px. Sacou? 9/12/2016 às 17:15
  • Entendi, sugiro então que aninhe no mesmo bloco as regras, para que fique mais claro! 9/12/2016 às 17:18
  • Obrigado! Já mudei. 9/12/2016 às 17:19
  • Recomendo que antes de responder pesquise pt.stackoverflow.com/search?tab=votes&q=texto%20responsivo
    – Syzoth
    9/12/2016 às 18:15

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