CSS 媒体查询和屏幕分辨率

Question

我试图让这些列在这些条件下模糊显示:

1. 在打电话时 -- 显示一列(100%)
2. 在平板电脑上 - 显示两列(占 50%)
3. 在桌面上时——尽可能多地显示

到目前为止，这是我的 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

实际上，您的列 完全按预期工作。查看规范:http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns

问题在于 column-width 是最小 宽度。如果您将列设置为 50%，该列将始终默认为 100%，因为无论如何，该列将始终至少占其容器的一半(我可能解释得很奇怪)。您基本上需要为平板电脑 View 设置所需的 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;
    }
  }   

fiddle : http://jsfiddle.net/disinfor/a65pb9re/1/