Question

我试图让这些专栏在这些条件下隐约显示：

在手机上时 - 显示一列（100％）
在平板电脑上显示两列（50％）
在桌面上 - 显示尽可能多的

到目前为止，这是我的CSS代码，但它没有按预期工作：

编辑：我修改了一些媒体查询，背景颜色正在按预期变化......但宽度不是。要在小型设备上重复迭代...我希望DIV能够占用100％的屏幕宽度...在平板电脑上我希望它们将屏幕分成两半......在桌面屏幕上我希望它们能够传播相应地在整个屏幕宽度上。

  @media screen and (max-width: 35.5em) { /* 568px or less */
    div.listing {
      -moz-columns: 100%;
      -webkit-columns: 100%;
      columns: 100%;
      background-color: red;
    }
  }

  @media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
    div.listing {
      -moz-columns: 50%;
      -webkit-columns: 50%;
      columns: 50%;
      background-color: orange;
    }
  }

  @media screen and (min-width: 48em) { /* 1024px */
    div.listing {
      -moz-columns: 350px;
      -webkit-columns: 350px;
      columns: 350px;
      background-color: green;
    }
  }

Answer 1

我认为您不能以这种方式使用百分比，请尝试键入1而不是100%等于1列而2代替50%等于2栏

@media screen and (max-width: 35.5em) { /* 568px or less */
    div.listing {
      -moz-columns: 1;
      -webkit-columns: 1;
      columns: 1;
      background-color: red;
    }
  }

  @media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
    div.listing {
      -moz-columns: 2;
      -webkit-columns: 2;
      columns: 2;
      background-color: orange;
    }
  }

  @media screen and (min-width: 48em){ /* 1024px */
    div.listing {
      -moz-columns: 350px auto;
      -webkit-columns: 350px auto;
      columns: 350px auto;
      background-color: green;
    }
  }

小提琴：http://jsfiddle.net/wprdhswr/1/

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Answer 2

实际上，您的columns工作正常。查看规范：http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns

问题是column-width是最小宽度。如果您将列设置为50%，则列始终默认为100%，因为无论如何，列始终至少是其容器的一半（我可能解释为奇怪）。您基本上需要为平板电脑视图设置所需的em或px大小。或者，正如Adriano66指出的那样，设置列数，而不是宽度。

@media screen and (max-width: 35.5em) { /* 568px or less */
    div.listing {
      -moz-columns: 100%;
      -webkit-columns: 100%;
      columns: 100%;
      background-color: red;
    }
  }

  @media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
    div.listing {
      -moz-columns: 2;
      -webkit-columns:2;
      columns: 2;
      background-color: orange;
    }
  }

  @media screen and (min-width: 48em) { /* 1024px */
    div.listing {
      -moz-columns: 350px;
      -webkit-columns: 350px;
      columns: 350px;
      background-color: green;
    }
  }

小提琴： http://jsfiddle.net/disinfor/a65pb9re/1/

CSS媒体查询和屏幕分辨率

2 个答案: