grid float breakpoint 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;        
    }
}