html - CSS3 中有 column-min-width 和 column-max-count 吗？

Question

我在看 http://www.w3.org/TR/css3-multicol/ ，但它只允许您指定 column-width 和 column-count，可能两者都指定(单独或通过 columns)，但不定义任何一种方式来指定，例如，最小宽度和最大计数。

例如，在 category index of OpenBSD ports 上, 共有71个类别, 一般适合9em。

如果我使用 ul {-moz-column-width: 9em;}，那么在 89em 及以上，至少会有 9 列(89em = 9 × (column-width of 9em) + 8 × (column-gap of 1em)), 使得每列包含的类别非常少，而且，恕我直言，这使得导航更加困难，因为即使文本“看起来”是从左到右的，你仍然需要从上到下导航。 (或者有没有办法让列列表从左到右，而不是从上到下？)

如果我改为使用 -moz-column-count: 8;，那么该网站在较小的屏幕(低于 70em 左右)上的可用性会降低。

有解决办法吗？

Answer 1

是的，我们可以使用@media查询来为不同的屏幕指定不同的规则。

http://www.w3.org/TR/css3-mediaqueries/

ul { -moz-columns: 9em; }

@media (min-width: 89em) {
  ul { -moz-columns: 8; }
}