将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％的字体大小

回答

相关问题