如何让采用position:absolute的下拉按钮实现响应式？

先梳理原代码里导致响应式失效的核心问题：

• 全局*选择器硬写了width:1300px，直接锁死所有元素宽度，屏幕缩小后必然溢出
• 下拉框.dropdown-content_brand用了固定宽度1280px，小屏幕下完全无法自适应
• 按钮字体用固定18px，屏幕缩小时文字不会跟着调整，视觉比例失调

下面是修改后的完整代码，彻底解决这些问题：

<style>
* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    /* 移除固定宽度，让元素自适应屏幕 */
    max-width: 100%;
}

/* 给容器设置最大宽度，限制大屏下的页面宽度，小屏自动收缩 */
.dropdown_container {
    max-width: 1300px;
    margin: 0 auto;
}

.dropdown {
    border: #fff solid 10px;
    float: left;
    width: 50%;
    /* 加相对定位，让绝对定位的下拉框以它为基准 */
    position: relative;
}

.dropdown .dropbtn {
    background-color: #86c232;
    border: none;
    width: 100%;
    padding: 15px;
    /* 用相对单位设置字号，支持自适应 */
    font-size: 1.1rem;
}

.dropdown-content_brand {
    display: none;
    position: absolute;
    background-color: #ddd;
    /* 下拉框宽度改为100%，贴合父容器 */
    width: 100%;
    z-index: 999;
    /* 抵消父容器的边框偏移 */
    left: -10px;
    top: 100%;
}

.dropdown_container:after {
    content: "";
    display: table;
    clear: both;
}

.dropdown-content_brand .btn:hover {background-color: #ccc;}
.dropdown:hover .dropdown-content_brand {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

.btn {
    border: none;
    text-align: center;
    background: none;
    color: #000;
    /* 用rem做字号单位，配合媒体查询调整 */
    font-size: 1rem;
    float: left;
    padding: 10px 15px;
    width: 25%;
    /* 小屏幕下按钮最小宽度，避免挤成一团 */
    min-width: 100px;
}

.btn_show_brand {
    background-color: #86c232;
    border: none;
    font-size: 1rem;
    padding: 10px 15px;
    margin: 10px;
    /* 用calc计算宽度，抵消margin影响 */
    width: calc(100% - 20px);
    float: left;
}

/* 媒体查询：小屏幕下优化布局 */
@media screen and (max-width: 768px) {
    .dropdown {
        width: 100%;
        border-width: 5px;
    }
    .btn {
        width: 50%;
        font-size: 0.9rem;
    }
}
</style>

<div class="dropdown_container">
    <div class="dropdown">
        <button class="dropbtn">Brand</button>
        <div class="dropdown-content_brand">
            <div class="btn_show"> 
                <button class="btn_show_brand active" onclick="filterSelection('all')"> Show all</button> 
            </div>
            <div class="btn" onclick="filterSelection('sram')">SRAM</div>
            <div class="btn" onclick="filterSelection('shimano')">SHIMANO</div>
            <div class="btn" onclick="filterSelection('rockshox')">ROCKSHOX</div>
            <div class="btn" onclick="filterSelection('magura')">MAGURA</div>
        </div>
    </div>
</div>

关键修改说明：

1. 移除全局固定宽度，改用容器最大宽度限制，保证大屏不拉伸、小屏自适应
2. 给下拉按钮容器加相对定位，让下拉框贴合父容器，不再脱离文档流乱跑
3. 字体改用rem相对单位，配合媒体查询在小屏幕下自动缩小
4. 按钮宽度用calc和最小宽度控制，避免margin导致的溢出问题
5. 新增媒体查询，针对移动端调整布局，让按钮排列更合理

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