如何实现包含两个Dropdown的响应式容器？

首先修正你代码中的拼写错误：border-raidus 应为 border-radius。以下是完整的响应式实现方案，从结构调整到CSS适配，确保在所有屏幕尺寸下保持一致的位置与外观：

一、优化HTML结构 #

给下拉框添加分组容器，明确层级，便于样式控制：

<div class="rectangle">
   <div class="selection">
      Selection
   </div>
   <div class="dropdowns-container">
        <div class="dropdown-group">
            <div class="dropdown-label">Dropdown1</div>
            <div class="dropdown">dropdown</div>
        </div>
        <div class="dropdown-group">
            <div class="dropdown-label">Dropdown2</div>
            <div class="dropdown">dropdown</div>
        </div>
   </div>
</div>

二、响应式CSS代码 #

采用相对单位+Flexbox布局，配合媒体查询实现全屏幕适配：

/* 全局重置，消除默认样式差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.rectangle {
  width: min(90%, 800px); /* 大屏限制最大宽度，小屏保持90%占比 */
  border-radius: 2vh;
  border: 1px solid black;
  margin: 2rem auto; /* 水平居中，上下留间距 */
  padding: 1rem;
}

.selection {
  padding-left: 1.5rem;
  color: black;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.dropdowns-container {
  display: flex;
  flex-wrap: wrap; /* 小屏自动换行 */
  gap: 2rem; /* 下拉框间的间距 */
  padding: 0 1.5rem 1rem;
}

.dropdown-group {
  flex: 1 1 200px; /* 最小宽度200px，空间充足时平分宽度 */
}

.dropdown-label {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.dropdown {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: #f8f8f8;
  width: 100%; /* 宽度占满父容器 */
}

/* 小屏适配微调 */
@media (max-width: 480px) {
  .rectangle {
    width: 95%; /* 小屏提升宽度占比 */
    padding: 0.8rem;
  }
  
  .selection {
    font-size: 1rem;
    padding-left: 1rem;
  }
  
  .dropdowns-container {
    gap: 1.5rem;
    padding: 0 1rem 0.8rem;
  }
}

核心响应式逻辑说明 #

• min(90%, 800px)：既保证小屏下容器足够宽，又避免大屏中容器过度拉伸导致内容分散
• Flex布局的flex-wrap和flex属性：让两个下拉框在空间不足时自动换行，同时保留最小可交互宽度
• 全程使用相对单位（rem、vh、%）：确保元素尺寸随屏幕缩放同步调整
• 媒体查询：针对手机等小屏设备微调内边距、文字大小，优化移动端体验

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