body font-size

[rikaschmitt 54]

Gente, tenho uma dúvida sobre o "responsivo" do font-size. Quando eu seto um font-size para o body de 90%, esses 90% serão ajustados numa font-size 15px? Ou somente funcionaria utilizando a unidade "em"?

 

Pois queria meio que fazer uma font-size auto ajustável, mas sem muitas delongas, apenas mexendo no body.

Exemplo:

body { font-size: 100%; }
@media screen (max-width: 600px) {
   body { font-size: 60%; }
}
@media screen (max-width: 1000px) {
   body { font-size: 80%; }
}

algo do tipo..

funciona?

[guilomaker 31]

o navegador reconhece como padrão 16px a fonte, ai no seu caso você tem que definir um tamanho em px ate você ter o resultado que quer pra cada resolução, feito isso você vai transformar esses px em "em".

 

exemplo

 

body { font-size: 40px; }
@media screen (max-width: 600px) {
body { font-size: 20px; }
}
@media screen (max-width: 1000px) {
body { font-size: 30px; }
}

 

ai você faz a seguinte conta

 

pega o valor da fonte em px (40) e divide pelo valor padrão (16) e depois multiplica por (100).

 

40/16 * 100 = 250

 

ai vai ser

 

body { font-size: 2.50em; }

 

e se você usar um tamanho definido no body principal, ai nos outros bodys ao invés de você usar o tamanho de fonte padrão, você usa a fonte do body principal.

 

não sei se sua duvida era realmente essa, mais se for ta ai! nunca uso % em fontes.

[rikaschmitt 54]

Sim, mais ou menos isso.

 

Mas no caso, se eu usar um "body { font-size: 3em; }", posso usar um "h1 { font-size: 14px; }" que esses 14px vão se basear no 3em?? Ou sempre terei q usar a unidade "em" nas fontes?

[guilomaker 31]

e bom sempre usar o em nas fontes, porque se você definir 14px pro seu h1, esse seu h1 vai ficar com esse valor fixo independente do tamanho da tela e do font-size do body.

 

então se você quer seus textos sempre adaptáveis e etc, faça os cálculos e use o em nos que forem necessários.

[rikaschmitt 54]

Hummm...

Entendi. Sim, vou começar a testar aqui.

 

A formula é sempre: tamanho da fonte / 16 (padrão) * 100?

Digamos que o body está 2em e você quer usar uma font-size 13px num h1.. seria:

 

13 / 16 * 100? (independente do body já estar em 2em?)

 

 

Valeu.

[guilomaker 31]

aqui um erro da minha parte!

 

o line-height e que usamos o body como base pro calculo.

 

já pro font-size pode usar sempre o valor padrão ok?

 

flws mano boa sorte. :joia:

[rikaschmitt 54]

A tah.

Então deixa ver se eu entendi...

 

body { font-size: 1.25em; } (20px)

 

então, pra h1 14px eu faço o calculo: 14/20*100 isso?

[guilomaker 31]

aqui um erro da minha parte!

o line-height e que usamos o body como base pro calculo.

já pro font-size pode usar sempre o valor padrão ok?

flws mano boa sorte.

não esquece de sempre comentar seu css, com os valores reais.

[rikaschmitt 54]

Ah tah.

Blz.

 

 

Valeu!