(Artigo em construção, caso tenha interesse no assunto entre em contato.)

Em poucas palavras, um modo de fazer isso é definir um tamanho base do do body apenas uma vez em px (por exemplo, 16px), e a partir daí, toda e qualquer alteração de fonte ou então de tamanho de tela, até mesmo as largutas e alturas de elementos, deveriam ser definidas em em.

Isso também é uma questão de acessbilidade. Usar fontes fixas, em especial em navegadores mais antigos, impedia que a pessoa usasse o aumentar natural do navegador.

O bom de definir em em ou outra unidade que seja relativa e não fixa, é que ao aumentar o zoom da página ela reage como se o tamanho da tela ficasse com largura menor pelo ponto de vista responsível. Uma pessoa em um computador com uma tela FullHD que aumentar o zoom muito irá ver o site como se estivesse acessando de um celular, o que é bem interessante se comparado a simplesmente só aumentar a fonte e os blocos de caixas com tamanho fixo não aumentarem e ficar uma bagunça.

Reparem que alguns navegadores modernos pode até permitir um efeito parecido ao aumentar o zoom mesmo que as unidades usadas não sejam em em ou outra unidade relativa, mas algumas versões mais antigas isso não funciona.

Autor original do texto: Emerson Luiz Rocha
Link original: http://pt.stackoverflow.com/questions/5271/font-size-responsivo-conforme-o-tamanho-da-tela

Anúncios