CSS媒体查询和屏幕分辨率

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

打电话时——显示一列（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;
    }
  }      

---

我不认为你可以这样使用百分比，试着键入

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;
    }
  }      

小提琴：

---

事实上，您的

列

正按照预期工作。查看规范：

问题是

列宽

是最小宽度。如果将列设置为

50%

，则该列将始终默认为

100%

，因为无论发生什么情况，该列将始终至少占其容器的一半（我可能解释了这一点）。您基本上需要为tablet视图设置所需的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;
    }
  }   

小提琴：

---

对于宽度在48到64微米之间的屏幕，有什么样的风格？此外，如果您使用ems进行测量，为什么不将其用于列宽呢？请首先提供一个提琴：确认您有

标签。了解“未按预期工作”的含义也会很有帮助！为什么橙色或第二个媒体查询不强制每个媒体的宽度为50%？因为我在最初的问题中概述了一些要求，所以不能使用EM，因为我知道，我如何使用EM来填充所有空间或将其一分为二？