3

この質問が何らかのルールに違反しないことを願っていますが、おそらくいくつかの議論につながる可能性があります. そして、コードを書いてくれと頼んでいるかのように読めるなら、そうではありません! これにアプローチするための最善の方法についてアドバイスが必要です。フォーラムで非常に多くの提案を読み、Codepen と jsFiddle で非常に多くの異なるコードをいじりました。始める！

なるように、私が求めているものを可能な限り詳細に説明しようと思います....

私は既存のサイト ( http://www.margate-fc.com/content/frontpage.php ) を維持していますが、再設計が遅れています。トラフィックの大部分はモバイル デバイスからのものであるため、現在の固定レイアウトは適切ではありません。現在のヘッダー<>サイドバー、コンテンツ、サイドバー<>フッター レイアウトまたは少なくとも同様のものを維持しながら、サイト全体を応答性の高いものにしたいと考えています。

ヘッダーとフッターはさまざまな解像度でわずかに変化し、ナビゲーション バーは特定のブレークポイントでドロップダウン/キャンバス外メニューに切り替わりますが、これらのいずれも問題なく使用できます。

モバイルとデスクトップの間で最も変化するのは中央のセクション (サイドバー、コンテンツ、サイドバー) であり、アドバイスが必要な場所です。3つの異なるレイアウトがあります...

  • 3 つの列すべてが表示されます (800px 以上)
  • コンテンツと右サイドバー (広告) を並べて表示し、左サイドバー (統計) オフキャンバス (799px 以下)
  • コンテンツと右側のサイドバーが積み上げられ、左側のサイドバーがオフキャンバス (おそらく 479px 以下 - 現実的には、コンテンツが狭くなりすぎるポイントになります)

私が考慮に入れたい他のいくつかのこと....

2 つのサイドバーの幅をできるだけ固定したいと思っています。

デザイン全体を特定の視点まで流動的にし、より広い画面にサイド広告用のスペースを残してほしい.

理想的には、サイドバーが列として表示されている場合は、ハックなしで高さと背景色を一致させたいと思います（実際には、幅の広い境界線や画像を使用せずに背景色を選択します）。

質問することはあまりありませんよね？

私が達成しようとしていることのそれぞれについて、さまざまなアドバイスをたくさん読みましたが、その多くは問題なく、以前のある時点でその多くを実行しました. 私が抱えている問題は、すべてを連携させることです。

理想的には、フレームワークを使用して Twitter Bootstrap に飛び込んだ後の自分を達成したいと考えていました。私が抱えていた問題は、スパンが流動的すぎることでした (そのため、サイドバーは含まれるコンテンツよりもはるかに広いものから非常に簡単に小さくなりすぎました) と、ガターが広すぎることでした。私はそれらを変更しようとしましたが、数学の学位がなければ結果はめちゃくちゃでした.

また、特定の画面幅では、サイドバーは両方とも表示されましたが、コンテンツはありませんでした。画面が小さくなると、コンテンツが戻ってきました。

それが私が今いる場所であり、ここまで読んでくれた人には本当に感謝しています!

それで、私が求めているものを達成するための最良の方法は何ですか? Bootstrap よりも柔軟性のあるフレームワークを使用しようとしますか?それともハンドコーディングしようとしますか? 後者の場合、モバイル レイアウトから開始してから、より高いブレークポイントを処理しますか、それともフルスクリーンから開始し (同じ高さと色付きの列で実現するのが最も難しいため)、解像度を下に向かって処理しますか?

または、誰でも提案できる別の方法がありますか? 可能な限り CSS ベースの提案を歓迎しますが、それが最善の方法であると思われる場合は、喜んで JS を使用します。

4

2 に答える 2

3

コードを見ることができずにすべてに対処することはできませんが、1 つの例を挙げてみましょう。

理想的には、フレームワークを使用して Twitter Bootstrap に飛び込んだ後の自分を達成したいと考えていました。私が抱えていた問題は、スパンが流動的すぎることでした (そのため、サイドバーは含まれるコンテンツよりもはるかに広いものから非常に簡単に小さくなりすぎました) と、ガターが広すぎました.

したがって、グリッドの基本的な流動性には問題がないと解釈しますが、サイドバーの div は異なる動作をする必要があります。よし、それからそれらをグリッドから取り出して、それらを別々に扱ってください。

それ以外の：

<div class="container span12">
  ...
  <div id="sidebarLeft"  class="span2">...</div>
  <div id="content"      class="span8">...</div>
  <div id="sidebarRight" class="span2">...</div>
  ...
</div>

試す：

<div class="container span12">
  ...
  <div class="wrapper clearfix span12">
    <div id="sidebarLeft" class="sidebar">...</div>
    <div id="sidebarRight" class="sidebar">...</div>
    <div id="content" class="content_block">...</div>
  </div>
  ...
</div>

次に、独自のスタイルを適用して、異なる動作が必要な領域だけをレイアウトします。

.sidebar {
  width: 200px;
  float: left;
}
#sidebarRight {
  float: right;
}
#content {
  margin-left: 200px;
  margin-right: 200px;
}

またはそのようなもの。次に、メディア クエリを使用して (display:none;) 非表示にしたり、レイアウトのカスタム部分をさまざまなサイズで微調整したりできます。

于 2013-06-15T23:19:05.467 に答える
0

Bootstrap は重すぎると思います。既存の Web サイトを変換する場合、Bootstrap を使用すると問題が増えるだけです。私が見つけたのは、Bootstrap.css を完全にカスタマイズして完全に自分に合うようにしない限り、多くの Bootstrap 規則を念頭に置いて設計することになるということです。Bootstrap の「同一性」については多くの批判がありました。これは、何千もの Web サイトが同じように見えるという事実に見られます (Jumbotron スライダー、ナビゲーション メニュー、ヒーロー ユニットなどをご存知でしょう)。

私の意見では、いくつかのオプションがあります -

  1. 少し邪魔にならないZurb FoundationやGroundwork CSSなどのフレームワークを使用してください。
  2. メディア クエリを使用して、サイトのいくつかの異なる「バージョン」をハンドコーディングします (私がやりたいのは、マスター div で個別のコンテンツ領域を定義することです [つまり、1 つの div は「iphone」と呼ばれ、もう 1 つの div は「desktop」と呼ばれ、それらを非表示にします)。メディアクエリを使用])。
  3. 流動的なグリッド システムを使用し、コンテンツをそのグリッド システムに完全にリファクタリングします。私の考えでは、優れた流動グリッド システム (フレームワーク自体ではない) は 960 グリッド システム ( http://960.gs/ ) です。または、Bootstrap Web サイトのカスタマイズ機能を使用して、必要な要素。
  4. 次に、もちろん 3 番目のオプションは、現在の Web サイトの特定の要素を非表示にすることです。つまりdisplay:none;、メディア クエリで設定されたサイドバーです。

メディア クエリ

ただし、Bootstrap は、適切な CSS メディア クエリのセットから始めることを推奨しています。たとえば、Bootstrap が推奨する一連のクエリを使用すると、サイトの設定を次のように想定できます。

/* Large desktop */
@media (min-width: 1200px) {
.iphone {display:none;}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.iphone {display:none;}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

.main {display:none;}

.iphone {
display:block;
top:0;
left:0;
right:0;
bottom:0;
height:100%;
width:100%;
}
}

/* Landscape phones and down */
@media (max-width: 480px) {
.main {display:none;}
/* whatever code you want to put here for landscape viewing of the website on a mobile (if you need it)*/
}
于 2013-06-15T23:07:29.387 に答える