1

Galera tô fazendo o front end de um site responsivo, li alguns materiais sobre como montar sites responsivos etc, estou usando 'EMS' ao invés de pixels nos tamanhos das fonts, mas elas não mudam de acordo com a resolução da tela.. Ex: Eu declarei no body:

body{
    font-size: 62.5%;
}

E segundo li, essa técnica faria com que quando eu quisesse por o tamanho da fonte em 'EM' eu só faria ex: 20px = 2em; 15px = 1.5em; mas não funcionou :/

2
  • 1
    Você teria por acaso a fonte onde você obteve essa informação? Nunca ouvi falar disso antes... P.S. Eu confirmo que essa técnica estranha funciona: jsfiddle.net/qfpke31c/1 O problema é que atribuir a fonte a uma certa porcentagem me parece ser relativo ao tamanho da fonte atual - e não ao tamanho da tela atual.
    – mgibsonbr
    Commented 9/10/2014 às 19:44
  • 3
    @mgibsonbr Essa técnica parte do princípio de que os browsers usam 16px como padrão do font-size do body, e que os valores em em são herdados. Mas realmente não é uma técnica para ajuste conforme resolução.
    – bfavaretto
    Commented 9/10/2014 às 19:58

2 Respostas 2

5

O que estás à procura chama-se Viewport Percentage Units que são unidades em relação ao tamanho da tela:

Ver exemplo no JSFiddle

No JSFiddle, manipula a largura da janela de preview para veres o texto a encolher/aumentar.

p{
    font-size: 16px; font-size: 4vw;
}

Essencialmente, os valores são:

1 v == 1% do tamanho inicial do texto na tela:

  • vw (viewport width);
  • vh (viewport height);
  • vmin (o mais pequeno de vw ou vh);
  • vmax (o maior de vw ou vh).

Podes ler mais sobre isto em:

CSS Values and Units Module Level 3: 5.1.2 Viewport-percentage lengths.


Créditos da resposta para o utilizador @jbenjohnson no SOEN nesta resposta.

0

Algo que acho que pode vir a te ajudar é o entendimento dos REMs, que é uma paradinha bem interessante.

Mesmo sendo um texto em inglês, é completamente válida a leitura desse link: http://snook.ca/archives/html_and_css/font-size-with-rem

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 .