問題縮放字體到屏幕尺寸

我有一個導航欄和主頁的簡單頁面。導航欄是固定的，主頁佔據屏幕的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縮放正確。