能否通过CSS实现窗口缩小时Header内容切换？是否需要JS？

完全不需要JavaScript，用CSS的**媒体查询（Media Queries）**就可以实现窗口缩放时的内容切换逻辑。以下是具体的修改方案：

先修复原CSS的小问题 #

原代码中.first-header的column-gap:;是无效语法，建议删掉或者设置一个合理值，比如column-gap: 20px;，避免浏览器解析报错。

修改后的完整CSS代码 #

.first-header {
    height: 45px;
    padding-left: 25%;
    padding-right: 25%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: rgb(237, 45, 47);
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 20px; /* 修复无效语法，添加间距 */
}

.outfit-selection-by-gender {
    display: flex;
    flex: 1;
    justify-content: start;
}

.women, .men, .kids {
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 12px 20px;
}

.women, .kids {
    border: 1.5px solid black;
    border-top: 0;
    border-bottom: 0;
}

.men {
    border: none;
}

.support-section {
    display: flex;
    justify-content: end;
}

.order-tracking-button, .contact-us-button, .app-download-button {
    padding-left: 15px;
    border: none;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
}

/* 添加媒体查询，设定断点（这里用768px作为移动端分界） */
@media (max-width: 768px) {
    .first-header {
        grid-template-columns: 1fr; /* 改为单列布局 */
        padding-left: 5%;
        padding-right: 5%; /* 缩小左右内边距，适配小屏幕 */
        justify-content: center;
    }

    /* 隐藏性别分类板块 */
    .outfit-selection-by-gender {
        display: none;
    }

    /* 隐藏支持板块里的跟踪订单和联系我们按钮 */
    .order-tracking-button, .contact-us-button {
        display: none;
    }

    /* 让下载APP按钮居中显示 */
    .support-section {
        justify-content: center;
    }

    .app-download-button {
        padding-left: 0;
        font-size: 14px; /* 适当放大字号，提升移动端可读性 */
        font-weight: bold;
    }
}

逻辑说明 #

1. 全屏（大于768px）时，保持你原来的双栏布局，显示性别分类和完整的支持板块。
2. 当窗口宽度小于768px时，媒体查询里的样式会覆盖原有样式：
   • Header改为单列布局，缩小左右内边距
   • 隐藏性别分类板块和支持板块里的「TRACK ORDER」「CONTACT US」按钮
   • 让「DOWNLOAD APP」按钮居中显示，并且放大字号增强可读性

你可以根据需求调整断点（比如改成992px适配平板），或者调整样式细节（比如颜色、内边距）来匹配目标网站的设计。

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