7

Estou fazendo um tema para wordpress e coloquei a font com o tamanho de 5em o que fica em torno de 80px, mas quando eu testo no meu celular com 320px de largura, a fonte fica quebrada e feia, eu queria algo que fizesse a fonte ficar automaticamente no tamanho necessário.

Meu css está assim atualmente:

#header .logo {
    height: 120px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 30px 0 0 0;
    color: #FFF;
    font-size: 5em;
    font-weight: bolder;
    text-transform: uppercase;
    font-family: 'Raleway';
}

2 Respostas 2

9

A resposta do Samir está ótima, mas a medida vm não é suportada por alguns celulares mais antigos:

  • Androids mais antigos que o 4.4 (como o 4.2 e 4.3)
  • iOS7, IE11 e Edge só tem suporte parcial

(Fonte: http://caniuse.com/#feat=viewport-units)

No caso provavelmente o seu layout também é responsivo, então você pode reaproveitar as suas media-queries existentes, por exemplo:

@media (max-width: 768px){
    elemento {
        font-size: [MEDIDA DESEJADA];
    }
}

@media (max-width: 1024px){
    elemento {
        font-size: [MEDIDA DESEJADA];
    }
}

Note que media-query não funciona em alguns browsers quando usado eles aninhados.

Se precisar de compatibilidade pro IE8 pode tentar este script que não tem dependencias com outros frameworks javascript: https://github.com/scottjehl/Respond

2
  • 1
    Deixei o link pro canIUse na outra resposta, rsrs. Ótima resposta. ++ Commented 26/07/2016 às 15:24
  • @SamirBraga upvote pra outra resposta, muito bem detalhada ;)
    – Syzoth
    Commented 26/07/2016 às 15:31
4

Isso acontece porque o em vai pegar, no caso, uma porcentagem do tamanho da fonte do elemento pai, e não necessariamente o seu próprio tamanho (height/width), então se no mobile você não usar um breakpoint para definir um novo tamanho de fonte para o elemento pai a div.logo está certa em permanecer da mesma forma, já que sua referência não mudou.

Dessa forma, você pode usar o vw unit no elemento pai ou na própria div. Explico mais sobre essa unidade aqui.

Olhe esse exemplo(ou jsfiddle):

Nota: No StackSnippet clique em no botão Página toda e no jsfiddle modifique manualmente o tamanho da janela ou do iframe

html, body {
    margin: 0;
    padding: 0;
}
#header{
    font-size: 2vw;
}
#header .logo{
    height: 180px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 30px 0 0 0;
    color: #666;
    font-size: 5em;
    font-weight: bolder;
    text-transform: uppercase;
    font-family: 'Raleway';
}
<div id="header">
  <div class="logo">
    <p>Font responsiva.</p>
  </div>
</div>

Ou você pode criar os breakpoints que disse antes. Veja esse exemplo. Repare que mudo apenas fonte do #header.

3
  • 1
    Boa explicação, ótimo link da outra resposta +1
    – Syzoth
    Commented 26/07/2016 às 15:32
  • Eu não entendi o porque do downvote, mas suponho que seja por que o código estava em outro link ao invés do stacksnippet, então removido margens da página pra evitar quebra do texto e adicionei o código no stacksnippet pra não depender de ferramentas de terceiros.
    – Syzoth
    Commented 28/07/2016 às 18:16
  • @GuilhermeNascimento, obrigado pela edição :) . Também acho que foi por isso. Commented 28/07/2016 às 18:23

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 .