2

私には、応答性を高めるためにWebサイトを「改造」するといううらやましい仕事があり、ZurbFoundation980pxグリッドが与えられています。既存のサイトをこれにどのように適合させるべきかについて少し迷っています-要素を新しいグリッドに揃えるために完全に再設計する必要がありますか？サイトが比例してスケーリングし、特定のブレークポイントで一部の要素を非表示にし、他の要素の新しいcssをロードすることを理解していますが、それは私が得られないグリッドです。

4

2 に答える 2

3

私はこれまでに2つの960gsWebサイトを変換しましたが、どちらもかなり速く進みました。

手始めに、プロジェクト内のすべての基盤リソース（JavascriptsとCSS）を参照していることを確認してください。

まず最初に、グリッドは960ですが、zurbは980であるとおっしゃいましたが、これは完全にカスタムです。あなたがする必要があるのはCSSオーバーライドを追加することです。これを行うには、app.cssを開き、次のコードを追加します。

.row {max-width：960px; }

次に、現在のHTMLを調べて、それがZurbのものとどれほど似ているかを確認する必要があります。960gsでは、行はなく、列のみです。したがって、私のプロジェクトでは、行を追加し、次のように列クラスで検索と置換を行う必要がありました。

前：

<div class="container_12">
  <div class="grid_8">
          ...    
  </div>
  <div class="grid_4">
          ...
  </div>
</div>

後：

<div class="container">
 <div class="row">
  <div class="eight columns">
          ...    
  </div>
  <div class="four columns">
          ...
  </div>
 </div>
</div>

すべてのページでこれを行う必要があります。各<row>には、12列のみが含まれている必要があることに注意してください。

これが完了したら、順調に進んでいるはずです。柔軟なグリッドと柔軟なコンテンツを扱っているので、おそらくいくつかの追加の作業が必要になります。

于 2012-05-08T19:35:20.710 に答える
0

960.gsWebサイトにあるAdapt.jsプラグインを使用できます。

http://adapt.960.gs/

すでに960gsと互換性があるため、フレームワークで何も変更する必要はありません。

ただし、流動性に適応するために、一部の内部CSSクラスを再コーディングする必要がある場合があります。

于 2012-10-09T11:44:45.383 に答える