css - 网格 float 断点 css 示例

Question

我创建了一个三列网格模板，每列宽度为 33%。我希望有人愿意告诉我如何设置 css，这样当我将屏幕最小化到 750px 时，模板将变成一个两列模板，每列宽度为 50%。

谢谢。

Answer 1

您可以使用 @media 查询来做到这一点，如下所示:

@media only screen and (max-width: 750px) {
    #column_container  {
      -webkit-column-count: 2;
      -moz-column-count: 2;   
      column-count: 2;        
    }
}


@media only screen and (min-width: 751px) {
    #column_container  {
      -webkit-column-count: 3;
      -moz-column-count: 3;   
      column-count: 3;        
    }
}