Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

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.

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.

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.

Removido margens da página pra evitar quebra e adicionado código no stacksnippet pra não depender de ferramentas de terceiros
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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(esse exemplo noou jsfiddle. (Modifique o tamanho da janela):

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.

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 no jsfiddle. (Modifique o tamanho da janela)

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

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.

adicionou 93 caracteres ao conteúdo
Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54

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 no jsfiddleesse exemplo no jsfiddle. (Modifique o tamanho da janela)

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

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 no jsfiddle. (Modifique o tamanho da janela)

Ou você pode criar os breakpoints que disse antes.

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 no jsfiddle. (Modifique o tamanho da janela)

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

adicionou 43 caracteres ao conteúdo
Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54
Carregando
Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54
Carregando