2

有没有办法使用“传统”网格布局根据屏幕宽度调整列数?

我正在使用许多响应式流体网格系统之一 - 例如来自 zurb 基础的网格(使用 12 列)。

假设我在页面上创建了三列:

<div class="row">
    <div class="four columns"></div>
    <div class="four columns"></div>
    <div class="four columns"></div>
</div>

假设在某个断点(屏幕宽度),我想在四列而不是三列中显示我的内容。

<div class="row">
    <div class="three columns"></div>
    <div class="three columns"></div>
    <div class="three columns"></div>
    <div class="three columns"></div>
</div>

更大的屏幕可能会更多,而更小的屏幕可能只有两列。

问题是 - 使用这个网格(或其他具有类似标记的网格),我必须更改标记 - 据我所知,我无法使用 css 媒体查询调整列数。

有什么方法可以轻松更改列数?也许使用javascript?

我确信一定已经有一个可以通过这种方式自定义的网格系统,但我还没有找到。

4

4 回答 4

2

您可能想看看语义网格。原因是所有内容都在 css 文件中定义,而不是标记。它确实使用 LESS,所以这对您来说可能是个问题。

此外,您可以按百分比制作网格,这将解决

有没有办法使用“传统”网格布局根据屏幕宽度调整列数?

即使这不是您要求解决的方法,我相信它会为您解决问题。

您还说要使用多少列。

于 2012-12-11T13:23:30.003 回答
0

试试 skeljs 太棒了。它会做你想要的。

于 2014-05-20T23:30:31.820 回答
0

查看 Foundation 中的块网格:http: //foundation.zurb.com/docs/components/block_grid.html

于 2014-04-10T16:20:59.060 回答
-1

http://gridsetapp.com正是您正在寻找的(我知道这是两年前的事,但也许其他人需要相同的解决方案)。

于 2015-02-17T12:53:27.673 回答