css - 如何使基于网格的布局设计具有响应性？

Question

我正在尝试设计我的网站 https://take-note.com react 灵敏。除了使用基于网格的布局的部分外，我能够完成大部分工作。页面底部有 4 列图像，标题为“笔记”、“模因”、“现场笔记”和“头版新闻”。我希望这些在狭窄的移动设备上显示在另一个下方。我尝试将宽度设置为 100%，但似乎没有成功。

CSS 大师有什么建议吗？

Answer 1

像这样使用这里的媒体查询:

@media (max-width: 767px) {
  div.cell {
    width: 100%;
    margin-left: 0 !important;
  }
}

这将使 4 列在宽度小于 768px 的设备中彼此下方；您可以根据您的用例相应地调整目标设备