响应式网格 - Verically/Horizontally 堆叠变化 width/height

Question

我想制作一个在横向和纵向模式下都适合移动设备大小的响应式网格。

所以我的 div/grid 中有以下组件：

因此，在纵向模式下，它们都具有相同的宽度并垂直堆叠，而在横向模式下，它们都具有高度并水平堆叠。例如：

横向

肖像画

我对css不太熟悉，过去两天一直在尝试这样做。任何帮助将不胜感激。

Answer 1

有一个媒体查询来检查设备的方向：

@media all and (orientation: portrait) { ... }

仅当设备处于纵向模式时，您才可以使用它来将 CSS 规则应用到您的元素：

@media all and (orientation: portrait) { 
  .column {
    width: 100%;
  }
}

像这样

Responsive grid - Verically/Horizontally stacked with changing width/height