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 aquiaqui.
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
.