html - CSS 网格布局流体单元格内容大小

Question

我是 CSS 网格的新手，我制作了一个动态网格布局，用于通过用户输入简单地选择数据。布局按预期工作，但我在实现智能手机设备的响应能力时遇到了问题。

我得到的是以下内容:

(平板电脑 View 当前)

(智能手机查看当前)

我想要的结果是改变智能手机设备的网格列布局，只得到这样的结果:

(需要智能手机 View )

所以我可能需要一种一致的方式来改变它:

.container--controls-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

为此:

.container--controls-buttons {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

适用于任何类型的智能手机设备。由于我无法判断将使用哪些智能手机，因此根据设备宽度进行媒体查询对我来说并不是一个真正的选择。 :/

您可以在以下代码笔上查看我的完整代码:https://codepen.io/manuelhrast/pen/RwbOwpX?editors=1100

在此先感谢您提供的任何帮助! :)

Answer 1

更新此媒体查询将有所帮助。大部分智能手机都会覆盖。

@media screen and (max-width: 600px) {
  .container--controls-buttons {
    grid-template-columns: auto;
  }
}