Question

我正在努力使我的网站https://take-note.com的设计得到回应。除了使用基于网格的布局的部件之外，我能够完成大部分工作。页面底部有4列图像，标题为“注释”，“模因”，“现场注释”和“首页新闻”。我希望这些在狭窄的移动设备上出现在另一个之下。我试图将宽度设置为100％，但似乎没有这样做。

CSS大师的任何建议？

Answer 1

在此处使用媒体查询：

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

这将使4列在宽度小于768px的设备中低于另一列;您可以根据您的使用情况相应地调整此目标设备

如何使基于网格的布局设计响应？

1 个答案: