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**](http://pt.stackoverflow.com/questions/106962/quais-as-diferen%C3%A7as-entre-as-unidades-de-tamanhos-de-fonte-vw-em-e/107092#107092).

Olhe esse exemplo([ou jsfiddle](https://jsfiddle.net/rs0tLs60/)):

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
    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';
    }

<!-- language: lang-html -->

    <div id="header">
      <div class="logo">
        <p>Font responsiva.</p>
      </div>
    </div>

<!-- end snippet -->

Ou você pode criar os breakpoints que disse antes. Veja [esse exemplo](https://jsfiddle.net/j1xebttd/). Repare que mudo apenas  fonte do `#header`.