求助：如何让导航栏按钮随窗口缩放同步适配？

你的导航栏已实现宽度自适应，但按钮（导航链接）无法同步缩放，核心问题是代码中存在多处固定值，导致元素无法随屏幕尺寸灵活调整。以下是具体问题分析和修改方案：

问题点梳理 #

• 导航链接的line-height: 60px是固定值，和导航栏的10vh高度脱节，小屏幕下会出现文字溢出或错位
• Logo用了固定宽度300px，窄屏会挤压其他导航项，甚至导致布局溢出
• 字体大小font-size: 20px是固定值，无法随屏幕缩放
• 导航链接的padding: 1em依赖父元素固定字体，同样无法自适应

修改后的CSS代码 #

#topnav {
    width: 100vw;
    min-height: 8vh; /* 用min-height替代固定height，让内容决定高度 */
    position: fixed;
    top: 0;
    right: 0;
    background-color: black;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    font-size: clamp(14px, 2vw, 20px); /* 字体自适应：最小14px，最大20px，中间按屏幕宽度比例缩放 */
    display: flex;
    justify-content: space-between;
    align-items: center; /* 新增，实现导航内容垂直居中，替代固定line-height */
    padding: 0 1em; /* 左右内边距，避免内容贴边 */
}
.nav-link-container {
    display: flex;
    gap: 0.5em; /* 用gap控制导航项间距，比单独加padding更易维护 */
}
#logo {
    width: clamp(180px, 25vw, 300px); /* Logo宽度自适应：最小180px，最大300px */
    font-weight: bold;
    color: green;
}
.nav-link {
    display: block;
    padding: 0.8em 1.2em; /* 相对单位内边距，随字体大小同步缩放 */
    color: green;
    text-align: center;
    text-decoration: none;
    /* 移除固定line-height，依赖父元素align-items:center实现垂直居中 */
}

关键修改说明 #

1. 字体自适应：使用clamp(min, preferred, max)函数，让字体在不同屏幕尺寸下自动调整，兼顾可读性和适配性
2. 垂直居中优化：给#topnav添加align-items: center，替代导航链接的固定line-height，确保文字始终垂直居中
3. Logo宽度自适应：通过clamp限制Logo的最小和最大宽度，避免窄屏溢出、宽屏过大
4. 灵活间距：给导航容器用gap控制项间距，布局更整洁且易维护
5. 导航栏高度：用min-height替代固定height，让导航栏高度随内容（字体、内边距）自动调整，避免内容溢出

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