如何随屏幕宽度线性调整导航栏项间距（60px至20px）

问题描述 #

需求：当屏幕宽度从1065px缩小至905px时，导航栏中各项的间距需从60px线性减小至20px。现有HTML结构及CSS代码如下：

HTML结构 #

<header class="header">
    <a href="#" class="logo">
        <img src="type2.png" alt="logo" class="logo_img">
    </a>
    <nav class="nav">
        <ul class="nav_list">
            <li class="nav_item">
                <a href="#" class="nav_link">Home</a>
            </li>
            <li class="nav_item">
                <a href="#" class="nav_link">Service</a>
            </li>
            <li class="nav_item">
                <a href="#" class="nav_link">Supply</a>
            </li>
            <li class="nav_item">
                <a href="#" class="nav_link">Sale</a>
            </li>
            <li class="nav_item">
                <a href="#" class="nav_btn">CONTACT</a>
            </li>
        </ul>
    </nav>
</header>

现有CSS代码 #

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-image: url("4857385.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.header {
    background-color: rgba(0, 91, 127, 0.75);
    display: flex;
    flex-direction: row;
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}

.logo_img {
    display: flex;
    padding: 10px; 
}

.nav_list {
    display: flex; 
    column-gap: 60px;
}

.nav_link {
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    transition: .3s;
}

.nav_link:hover {
    font-size: 17px;
    color: #ffee10;
}

.nav_btn {
    color: rgba(0, 91, 127, 1);
    font-size: 15px;
    background-color: white;
    padding: 7px 18px;
    border-radius: 1000px;
    transition: 0.3s;
}

.nav_btn:hover {
    color: #001F3F;
    font-size: 16px;
    background-color: #ffee10;
}

@media (max-width: 1115px) {
    .header {
        padding: 0 5px;
    }
}

@media (max-width: 1065px) and (min-width: 905px) {
    /* I don't know what to do */
}

@media (max-width: 905px) {
    .header {
        flex-direction: column;
        padding: 0 0 1em 0;
    }
    .nav_list {
        column-gap: 52px;
    }
}

尝试使用公式calc(60px - 2px * (100vw - 905px) / 160)设置gap、column-gap、margin-right，但均未生效，寻求可行解决方案。

可行解决方案 #

1. 修正calc公式 #

原公式计算逻辑错误，导致间距变化不符合预期。正确的线性缩放公式需基于总变化量和宽度变化范围推导：

• 间距总变化量：60px - 20px = 40px
• 屏幕宽度变化范围：1065px - 905px = 160px
• 每1px宽度变化对应的间距变化：40px / 160px = 0.25px

因此正确的calc公式为：

calc(20px + 40px * (100vw - 905px) / 160)

或等价的反向计算：

calc(60px - 40px * (100vw - 905px) / 160)

注意：calc内的运算符前后必须添加空格，否则浏览器会解析失败。

2. 更新媒体查询样式 #

在(max-width: 1065px) and (min-width: 905px)的媒体查询中，覆盖.nav_list的column-gap属性：

@media (max-width: 1065px) and (min-width: 905px) {
    .nav_list {
        column-gap: calc(20px + 40px * (100vw - 905px) / 160);
    }
}

3. 效果验证 #

• 当屏幕宽度为1065px时，计算得：20 + 40*(1065-905)/160 = 60px，符合初始间距
• 当屏幕宽度为905px时，计算得：20 + 40*(905-905)/160 = 20px，符合目标间距
• 宽度在两者之间时，间距会线性过渡

内容的提问来源于stack exchange，提问作者Shahriar.Q