CSS 媒体查询和屏幕分辨率答案

【问题标题】：CSS media queries and screen resolutionCSS 媒体查询和屏幕分辨率
【发布时间】：2014-10-29 23:43:50
【问题描述】：

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

在手机上时 - 显示一列（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;
    }
  }

【问题讨论】：

宽度在 48 到 64em 之间的屏幕有什么样式？另外，如果您使用 em 进行测量，为什么不将它们也用于列宽？
你能提供一个小提琴吗
第一件事：确认你有<meta name="viewport" content="width=device-width">标签。
了解“未按预期工作”的含义也很有帮助！
为什么橙色或第二个媒体查询不强制每个的宽度为 50%？由于我在最初的问题中概述的要求，无法使用 EM（无论如何我都理解）如何使用 em 来填充所有空间或将其分成两半？

标签： css media-queries

【解决方案1】：

实际上，您的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/

【讨论】：

【解决方案2】：

我认为你不能以这种方式使用百分比，尝试输入 1 而不是等于一列的 100% 和 2 而不是等于两列的 50%

@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

【讨论】：