如何使基於網格的布局設計具有響應性？

Question

我正在嘗試使我的網站https://take-note.com的設計具有響應性。 除了使用基於網格的布局的零件之外，我能夠完成大部分工作。 頁面底部有4列圖像，分別為“注釋”，“模因”，“字段注釋”和“首頁新聞”。 我希望它們在狹窄的移動設備上一個接一個地出現。 我試圖將寬度設置為100％，但這似乎沒有做到。

CSS專家有什么建議嗎？

Answer 1

在此處使用媒體查詢：

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

在寬度小於768px的設備中，這將使4列彼此靠下； 您可以根據您的使用情況對目標設備進行相應的調整