Question

我有一个带导航栏和主页的简单页面。导航栏已修复，主页占据屏幕的100％。然后，查看器从主页向下滚动以查看其余的Web内容。

在移动设备或屏幕尺寸较小的设备上查看时，我遇到的字体不缩放问题。我相信这是因为我改变了导航栏以占据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>
	<title></title>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
	<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>

以下是移动设备上的一个示例，显示顶部文字未缩放，但第1节正确缩放。

这是Google Chrome中的Galaxy S5。主页/顶部和导航栏中的文本应该与section1文本的方式类似。如何修复它以便所有内容都缩放到屏幕上？

Answer 1

首先，没有一个是缩放。它正在应用浏览器默认值，因为您没有在提供的css中设置任何字体大小。您可以在Web检查器中对其进行测试（请记住在激活后重新加载页面）。

您可以使用vh（视图高度）或或vw（视图宽度）作为字体的百分比。

Answer 2

使用媒体查询根据屏幕大小进行调整例如： @media screen和（max-width：1000px）{ ＃最佳{ font-size：40px; / 将其更改为您需要的任何内容 / } } 相应地更改最大宽度以完美地管理每个屏幕

有关媒体查询的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

将缩放字体发布到屏幕尺寸

2 个答案: