8

ビューポート幅全体をサポートする CSS グリッド システムはありますか? ほとんどの Grid System は、960px から 1140px までの幅を意図しているようです。これは、通常のユーザーが最も展開する幅です (ほとんどの人が 1280px × 1024px を使用しているため)。

私の目的は、フル HD 解像度 (1920px × 1080px) を使用するユーザーにもレスポンシブなレイアウトを提供することです。

それを作るためのより良い/より簡単な方法があれば、plsは私に知らせてください

4

4 に答える 4

9

Twitter ブートストラップ流体グリッド システムはパーセンテージで動作します: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

純粋な CSS レスポンシブ グリッド システムも多数あります。たとえば、Skeletonです。

この記事では、それらの多くをカバーしています: http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

CSS 幅、メディア クエリ、および js フォールバックのパーセンテージを使用して、自分でそれを行うことができます (メディア クエリは完全にはサポートされていないため)。

しかし、これらのグリッド システムは、最もよくテストされているため、時間と頭痛の種を節約できます。

あなたの決定を助けるために、あなたは考慮する必要があります：

  • 必要なブラウザー サポートと、グリッド システムによって提供されるブラウザー サポート。
  • サイズ (それらはほとんどの場合軽量ですが、一部はグリッド システムだけではありません。つまり、Twitter ブートストラップ)。
  • 命名規則、奇妙な css クラス (たとえばspan4) を使用するつもりです。好きなものを選択してください。そのうちのいくつかは他のものよりもセマンティックです。
  • そして、少なくとも、オープン ソースの要因: コミュニティ、サポート、更新頻度...

また、このサイトはレスポンシブなインスピレーションに最も適しています: http://mediaqueri.es/

于 2012-03-30T10:04:03.327 に答える
2

Fluidable と呼ばれる流体グリッド システムに取り組んできました。max-width は好きなように設定できます。あなたの場合、単純に 100% に設定すると、グリッドがすべてのスペースを使い果たします。使用したい任意の数の列を構成することもできます。

https://github.com/andri/Fluidable

于 2012-03-30T10:11:57.630 に答える