2

「従来の」グリッド レイアウトを使用して、画面幅に応じて列数を調整する方法はありますか?

私はそこにある多くのレスポンシブ流体グリッドシステムの1つを使用しています-たとえば、zurb Foundationのグリッド(12列を使用)。

ページ全体にまたがる 3 つの列を作成するとします。

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

特定のブレークポイント (画面幅) で、コンテンツを 3 列ではなく 4 列で表示したいとします。

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

より大きな画面の場合はさらに多いかもしれませんし、少し小さい場合は 2 列だけかもしれません。

問題は、このグリッド (または同様のマークアップを持つ他のグリッド) を使用して、マークアップを変更する必要があることです。私の知る限り、css メディアクエリを使用して列の数を調整することはできません。

列数を簡単に変更する方法はありますか? 多分javascriptを使用していますか？

このようにカスタマイズ可能なグリッド システムが既にあるはずですが、見つけられませんでした。

4

4 に答える 4

2

セマンティック グリッドを参照してください。その理由は、マークアップではなく、すべてが css ファイル内で定義されているためです。LESS を使用しているため、問題になる可能性があります。

また、パーセンテージでグリッドを作成することもできます。これで解決します

「従来の」グリッド レイアウトを使用して、画面幅に応じて列数を調整する方法はありますか?

これはあなたが修正を求めていたアプローチではありませんが、問題を解決すると信じています。

また、使用する列の数も指定します。

于 2012-12-11T13:23:30.003 に答える
-1

http://gridsetapp.comはまさにあなたが探していたものです (2 年前のことは知っていますが、他の誰かが同じソリューションを必要としている可能性があります)。

于 2015-02-17T12:53:27.673 に答える