问题缩放字体到屏幕尺寸

我有一个导航栏和主页的简单页面。导航栏是固定的，主页占据屏幕的100％。观看者然后从主页滚动查看剩余的网页内容。问题缩放字体到屏幕尺寸

我在移动设备或屏幕尺寸较小的设备上查看时遇到字体无法缩放的问题。我相信这是由于我改变了导航栏占据100％的宽度，而主页占据了100％的高度。第1部分下的文本正确缩放（当屏幕较小时字体变大）。

如何让主页和导航栏增加字体？

h1{ 
 
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 
 
      0px 8px 13px rgba(0,0,0,0.1), 
 
      0px 18px 23px rgba(0,0,0,0.1); 
 
} 
 
html { 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
body { 
 

 
    background: #1A3742; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    color: white; 
 
    margin: auto 100px; 
 
    height: 100%; 
 
} 
 
#header { 
 
    background: gray; 
 
    padding: 28px 0 26px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1000; 
 
    width: 100%; 
 

 
} 
 

 
#top{ 
 
    text-align: center; 
 
    height: 100%; 
 

 
} 
 
#home-content{ 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
a[href="#top"] { 
 
    margin-left:100px; 
 
    margin-right:50px; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
} 
 
a img{ 
 
    vertical-align:middle; 
 
} 
 
.content { 
 
    margin-left:75px; 
 
    margin-top:25px; 
 
    overflow: hidden; 
 
} 
 
.content p{ 
 
    margin-top: 0px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
    <header id="header"> 
 
     <a href="#top">Name</a> 
 
     <a href=""> 
 
      <img src="" alt="img" height="24" width="24"> 
 
     </a> 
 
    </header> 
 

 
    <div id="top"> 
 
     <div id = "home-content"> 
 
      
 
      <h1>Top</h1> 
 
      <h2>Sub title</h2> 
 
      <p> 
 
      This text does not scale at all. 
 
      </p> 
 
     </div> 
 
    </div> 
 
    <div id="section1"> 
 
     <h1>Section 1</h1> 
 
     <div class = "content"> 
 

 
     <p> 
 
     This scales with the screen. 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 

 
     </p> 
 

 
     </div> 
 
    </div> 
 
</body> 
 
</html>

这里是移动的例子，显示了顶部的文本不结垢，但SECTION1缩放正确。