Aumentar ou diminuir fonte conforme resolução da pagina

[bcs_ptx 0]

Fala pessoal, seguinte, eu coloquei uma palavra dentro dessa div, quando eu diminuo a resolução da tela a imagem diminui conforme a pagina, mas a letra não, como faço para letra diminuir junto? abraços

 

<div id="aniversarios" style="margin-left:2%; margin-top:1%; width:15%; height:15%;	position:absolute;">

   <span style="position:absolute; width:100%; margin-top:3%;" class="texto_verde">Aniversariantes</span>

   <img src="img/teste_fundo_aniversarios.png" width="100%" height="100%" />

</div>

[sergiolopes 3]

Você vai precisar de algum JavaScript para cuidar disso pra você.

 

Dá uma olhada no FitText e vê se ele faz o que você quer:

http://fittextjs.com/

[Thiago Moraes 32]

Existe alguma solução com css puro?

[bcs_ptx 0]

isso que eu queria, só só com css daria para fazer.

[dinhografo 0]

já tentou definir o font-syze em porcentagem(100% = 12px) ou EM's?

mas, tenha em mente que

1em = 12pt = 16px = 100%

 

teoricamente '%' é relativa a resolução, mas honestamente não vi muita relatividade não, se você copiar um texto de um site definido como 100% 'font-family:Arial; font-size:100%;' em uma resolução de 800x600 e colar no word, vais ter uma fonte aria de 11pt(e não 12 como a tabela cima), e se você fizer a mesma coisa em uma resolução de 2048x1536 vai dar a mesma coisa.

 

você poderia usar as media queries do css3 'min-width, width e device-width'

ex. <link rel="stylesheet" href="iphone.css" media="screen and (max-width: 320px)">

ou direto no css

@media screen and (min-width:800px) { font-size:12pt; }

@media screen and (min-width:2048px) { font-size:16pt; }

isso sim funfa no ff do 7 pra cima e no IE(ca)9 e no chrome do 12 em diante se eu num me engano, mas(sempre tem um MAISS), o browser tem q interpretar 1º, ou seja, F5 no navegador.

 

na minha opinião? javascript ainda é a melhor solução!

pois roda no IE6, FF à lenha(foi daí q botaram fogo no rabo da raposa), chrome o lanche meniiiiiino, hehehe!

[William Bruno 1501]

teoricamente '%' é relativa a resolução,

no caso do font-size não. % é relativo ao valor declarado em px anteriormente para outro font-size ancestral, e não relativo a resolução.

[Lucas Peperaio 20]

Olha, tem uma solução com CSS 3: media queries

Você pode diminuir a fonte baseado em certas resoluções, largura e etc. Não sei se é o seu caso, mas talvez possa ajudar:

http://www.ferramentasblog.com/2012/05/tudo-sobre-layout-responsivo-responsive-design-introducao.html/