【レスポンシブデザイン】ブラウザを縮小してそのまま見た場合と、Chromeのデベロッパーで見た場合の違いについて

現在レスポンシブデザインに対応したwebサイトを制作しています。

ブラウザを縮小して見た場合と、Chromeのデベロッパーで見た場合(スマホサイズ)で全体のサイズ感が異なって表示されてしまいます。

ブラウザを縮小して見た場合は、文字やナビゲーションが思い通りのサイズになってくれるのですが、
Chromeのデベロッパーで見た場合ナビゲーションなどがすごく小さくなってしまいます。

Chromeのデベロッパーで見た場合に合わせてナビゲーションのサイズを調整すると、
ブラウザで見た場合のナビゲーションが凄く大きくなって表示されてしまいます。

.slicknav_menu {
width: 100%;
font-size: 2em;
box-sizing: border-box;
background: #F7B80C;
padding: 4.5px; }

解決策を教えて頂けますと幸いです。
宜しくお願いいたします。