我正在查看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×(列宽9em)+ 8×(列间隙1em)),使每个列包含很少的类别,并且,恕我直言,使其导航更加困难,因为即使文本从左到右“看起来”,您仍然需要从上到下进行导航。 (或者有没有办法让列从左到右,而不是从上到下?)
如果我改为使用-moz-column-count: 8;
,那么该网站在较小的屏幕上将无法使用,低于约70em左右。
有解决方案吗?
答案 0 :(得分:1)
是的,我们可以使用@media
查询为不同的屏幕指定不同的规则。
http://www.w3.org/TR/css3-mediaqueries/
ul { -moz-columns: 9em; }
@media (min-width: 89em) {
ul { -moz-columns: 8; }
}