element 两个input框 搜索区间 如何宽度自适应不同分辨率

在HTML中创建两个并排的输入框，用于设置搜索区间的宽度，并使其能够自适应不同分辨率，你可以使用CSS媒体查询(media queries)来实现响应式设计。以下是基本步骤：

1. 首先，确保你的HTML结构包含两个`<input>`元素，例如：

<div class="search-range">
  <input type="number" id="startInput" placeholder="开始">
  <input type="number" id="endInput" placeholder="结束">
</div>

2. 接下来，添加一些基础样式，比如初始宽度：

.search-range {
  display: flex;
}

#startInput,
#endInput {
  width: 50%;
  box-sizing: border-box; /* 确保内边距和边框不会影响总宽度 */
}

3. 使用媒体查询来针对不同的屏幕尺寸调整宽度。例如，在较小的屏幕上让它们堆叠在一起，而在较大的屏幕上保持原有的宽度比例：

/* 当视口宽度小于600px时 */
@media (max-width: 600px) {
  .search-range {
    flex-direction: column; /* 将flex方向改为垂直 */
  }
  
  #startInput,
  #endInput {
    width: 100%; /* 占满一列 */
  }
}

/* 对于更大的屏幕，可以设置一个最大宽度限制 */
@media (min-width: 600px) and (max-width: 1200px) {
  #startInput,
  #endInput {
    width: calc(50% - 10px); /* 减去小的间距 */
  }
}

以上代码中，通过`calc()`函数可以动态计算每个输入框的宽度，使得在不同分辨率下都能保持相对的比例。