4

Tenho um site responsivo só que a letra mesmo colocando em %, Rem ou EM não fica ajustando.

Então será que é possível fazer a fonte alterar por exemplo uma janela com o comprimento em 1000px e fonte-size em 1.8em (18px), subindo o comprimento da janela para 2000px então o fonte-size sobe para o equivalente algo como 36px?

Quero que a fonte ajuste seu valor conforme muda as dimensões da janela ou grid.

4
  • 3
    Um texto bastante interessante para complementar os conceitos: blog.popupdesign.com.br/design-responsivo-grids-e-texto
    – Delfino
    Commented 12/06/2015 às 23:46
  • Justamente nesse site encontramos um exemplo, já tentei mais não fica igual o texto no menu do popupdesign; no popup quando altura o browser altura a fonte, observe isso atentamente no maximizar e no minimizar. @Delfino
    – Eder
    Commented 13/06/2015 às 14:49
  • possível duplicata de Font-size para páginas responsivas
    – Delfino
    Commented 13/06/2015 às 14:58
  • No caso eu tenho que Definir um fonte-size para cada resolução? @media only screen and (max-width: 1000px) { body { font-size: 1.8rem; } } @media only screen and (max-width: 2000px) { body { font-size: 3.6rem; } } pude verificar isso no popupdesigner @Delfino @Fabio Mingorance
    – Eder
    Commented 13/06/2015 às 15:10

2 Respostas 2

4
@media only screen and (max-width: 1000px) {    
       body { font-size: 18px; }    
}
@media only screen and (max-width: 2000px) {    
       body { font-size: 36px; }
}

Apenas um detalhe, a medida em para fontes não tem relação proporcional direta em px e sim com o zoom de cada navegador. Geralmente 1em equivale a 16px em boa parte dos monitores.

1
  • Amigo até ai ja sei o problema é que quando tenho @media only screen and (min-width: 700px)and (max-width: 1000px) não muda a fonta ou seja ela não reajusta, ela continua com um mesmo valor em px mesmo colocando em EM % ou REM @Fabio Mingorance
    – Eder
    Commented 13/06/2015 às 14:52
4

Que tal esse exemplo de código? Eu achei esse blog post em português, mas o resumo da ópera é que 1vw é 1% da largura da tela, 1vh é 1% da altura da tela, e vmin e vmax são 1% da menor e maior dimensão, respectivamente. As duas primeiras unidades de medida funcionam em qualquer IE 9+.

(você pode arrastar as divisórias do grid no JSFiddle pra ver o efeito)

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 .