无需Media Queries：用Flexbox/Grid实现响应式输入框+按钮布局

当然可以纯用Flexbox或Grid实现这个布局，完全不需要媒体查询，核心是利用布局模块的自适应比例+最小宽度限制特性来触发布局切换。

Flexbox 实现方案 #

通过flex-grow控制大屏比例，结合min-width限制小屏时的最小宽度，让元素自动调整为各占50%：

/* 容器 */
.form-group {
  display: flex;
  gap: 1rem; /* 元素间间距，可根据需求调整 */
}

/* 输入框和按钮的基础样式 */
.input-field, .submit-btn {
  padding: 0.5rem;
  border: 1px solid #ccc;
  min-width: calc(50% - 0.5rem); /* 小屏时最小宽度为容器的50%，减去间距的一半 */
}

/* 大屏时输入框占3份，按钮占1份 */
.input-field {
  flex: 3;
}
.submit-btn {
  flex: 1;
}

原理：

• 当容器宽度足够大时，两个元素能在一行放下，flex-grow:3和flex-grow:1会让它们按75%/25%的比例分配宽度。
• 当容器宽度缩小到无法同时容纳75%+25%的宽度（且不小于各自的min-width）时，min-width会强制元素宽度不低于容器的50%，此时两个元素刚好各占50%填满一行。

Grid 实现方案 #

利用grid-template-columns的minmax()函数，同时定义元素的最小宽度和大屏比例：

/* 容器 */
.form-group {
  display: grid;
  gap: 1rem;
  /* 定义两列：最小宽度为容器50%减间距一半，最大宽度按3:1分配 */
  grid-template-columns: minmax(calc(50% - 0.5rem), 3fr) minmax(calc(50% - 0.5rem), 1fr);
}

/* 输入框和按钮的基础样式 */
.input-field, .submit-btn {
  padding: 0.5rem;
  border: 1px solid #ccc;
}

原理：

• 大屏状态下，minmax()的最大值3fr和1fr生效，列宽按75%/25%分配。
• 当容器宽度缩小到列宽无法满足3fr/1fr且不低于calc(50% - 0.5rem)时，minmax()的最小值会强制每列宽度为容器的50%，实现小屏各占一半的效果。

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