移动端导航栏显示不全、页面中部文本过大问题求助

问题说明 #

1. 移动端导航栏元素超出屏幕范围，无法完整显示
2. 页面中部标题文本尺寸过大，导致内容溢出屏幕

修改后的完整代码 #

HTML代码（无需调整结构） #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>OPGL Portfolio</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div class="container">
            <div class="nav">
                <div class="logo">
                    <img src="https://avatars.githubusercontent.com/u/74413191?s=400&u=7076f19ee2d11687d44fe772ee5a76ce3c437679&v=4" alt="logo" height="50px" width="50px">
                    <h1>OPGL</h1>
                </div>
                <div class="nav-links">
                    <a href="./index.html">Home</a>
                    <a href="index.html">About</a>
                    <a href="https://github.com/OPGL">Projects</a>
                    <a href="./utils/mail.html">Contact</a>
                </div>
            </div>
            <div class="content">
                <h1>Hi,<br/>
                    I'm Dawid,<br/>
                    <div>Begginer Developer</div>
                </h1>
                <p>&#60;!-- Begginer Web Developer, see more in about section --&#62;</p>
            </div>
            <div class="footer">
                <p>Made by Dawid Ploch via VSCode</p>
            </div>
        </div>
    </body>
</html>

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital@1&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Montserrat', sans-serif;
    background: #080a0b;
}
.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 80px;
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0px 0px 5px 5px;
    width: 100%;
    padding: 15px 20px;
    position: fixed;
    top: 0;
    z-index: 1;
    background-color: #080a0b;
}
.logo {
    color: #fff;
    font-family: 'Abel', sans-serif;
    font-size: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
}
.nav-links a {
    color: #fff;
    text-decoration: none;
    font-family: 'Abel', sans-serif;
    font-size: 20px;
    transition: all 0.3s ease;
}
.nav-links a:hover {
    color: #00b894;
}
.content {
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.content h1 {
    font-size: 50px;
    font-family: 'Raleway', sans-serif;
    padding: 20px;
}
.content h1 div {
    font-size: 30px;
}
.content p {
    text-align: center;
    color: gray;
}
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d1012;
    border-radius: 5px 5px 0px 0px;
    width: 100%;
    padding: 15px;
    position: fixed;
    bottom: 0;
    z-index: 1;
}
.footer p {
    color: #fff;
    font-family: 'Abel', sans-serif;
    font-size: 20px;
}

/* 移动端适配媒体查询 */
@media (max-width: 768px) {
    .logo {
        font-size: 22px;
    }
    .logo img {
        width: 40px;
        height: 40px;
    }
    .nav-links a {
        font-size: 16px;
    }
    .nav-links {
        gap: 10px;
    }
    .content h1 {
        font-size: 32px;
    }
    .content h1 div {
        font-size: 22px;
    }
    .footer p {
        font-size: 16px;
    }
}

关键修改说明 #

• 导航栏适配：
  • 给导航栏添加背景色，避免内容透过导航栏显示
  • 减少内边距和链接间距，通过媒体查询在移动端缩小logo和文字尺寸
• 文本适配：
  • 针对小屏幕设备（≤768px）动态调整标题和副标题大小，确保内容完全显示
• 布局优化：
  • 将容器改为垂直布局，给固定导航栏和底部footer预留空间，避免内容被遮挡
  • 将footer改为固定在底部，解决原布局中位置偏移的问题

内容的提问来源于stack exchange，提问作者TheKozax