將div設置爲高度100％的字體大小

我正在創建一個全部爲一頁的網站。但是，頁面頂部有一個佔據屏幕高度100％的div來創建整頁效果。一切工作正常，但在移動設備上，100％高度div中的任何文本的字體大小都會減小。我之前發佈過這個問題，但是，這次我一直在做更多的研究。將div設置爲高度100％的字體大小

這裏是我寫的代碼：

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>

下面是使用Chrome設備模式與銀河S5的例子。請注意，我向下滾動了一點，所以你可以看到在着陸部分的文字和科文1.

如果刪除在#top返回的行：

height: 100%;

的字體大小不會對頂部部分改變：

我知道我使用的是默認的字體大小，但我不認爲會導致問題。使用Chrome檢查這裏的字體大小：

HTML - 16px的
體 - 16px的
股利ID =頂部 - 16px的
H1（內#top返回） - 32PX
Div id = section1 - 16px
h1（inside＃section1） - 42.6667px

h1的字體大小爲2em。因此，Top的32px是有意義的，然而，42.6667px沒有。我的筆記本電腦沒有使用任何網絡瀏覽器的問題，只是移動。我更喜歡手機上的42.6667px，因爲它使它更符合條件。但是，我希望字體大小匹配。

由於#top div的字體大小很好，當我刪除div height = 100％時，我決定使用jQuery和頁邊距創建相同的整頁效果。

var winHeight = $(window).height(); 
var topHeight = $('#top').outerHeight(true); 
$('#top').css({ 
    'marginTop':(winHeight/2)-topHeight 
    ,'marginBottom':(winHeight/2)//-topHeight 
});

但是，我真的不希望這樣做。

那麼，有沒有辦法讓#top字體大小匹配＃section1字體大小？

來源

2016-05-31 eric

您正在製作響應式網站，但尚未配置視口。關於它的很好的鏈接here但實際上：

沒有視口，移動設備將呈現典型桌面屏幕寬度的頁面，縮放以適合屏幕。

所以，當你的身高和Chrome的設備模式渲染的高度比它大得多時，你會得到小文本。

添加以下的頭會讓你的網站能正常顯示在移動設備上：

<meta name="viewport" content="width=device-width, initial-scale=1" />

但是，你需要做出一些變化的100像素保證金可能是身體側squishes內容變成一個苗條的專欄。

來源

2016-05-31 15:16:11

謝謝，那正是我一直在尋找的。我會閱讀你給的鏈接。我確實注意到它做出了苗條的專欄。看起來好像我可以通過使用10vw而不是100px來解決這個問題。我需要重新設計我的網站來處理vh/vw而不是px嗎？ – eric

我通常使用諸如vw/vh之類的東西來處理這些事情，但是您可以使用媒體查詢輕鬆地整理纖細的列。像@ media screen和（max-width：767px）{body {margin：auto 15px; }}。 –

雅我嘗試了10vw而不是100px，它在移動設備上看起來好多了，然後在臺式機上做了。我會嘗試媒體查詢。謝謝！ – eric

將div設置爲高度100％的字體大小

回答

相關問題