問題タブ [fluid-layout]

この投稿は、コードの構文についてではなく、サイトの開発を開始する前の作業戦略についてです。

スマートフォン (Android { 3 種類のサイズ}、iPhone {2 種類のサイズ}、およびその他のスマートフォン以外の携帯電話) 用のモバイル サイトのフロントエンドを設計する必要がある場合、どのように進めればよいですか? (私のデザインは、これらすべてのデバイスで機能し、同じでなければなりません)

1- 柔軟な画像と流体グリッド (柔軟な DIV:s) に関するアイデアに従って作品をデザインします。

また

2- ターゲット モデルごとに異なるメディア クエリ サイズを設定しますか? (このソリューションは開発作業を増やす可能性がありますね?)

考えてくれてどうもありがとう...

IE7 を制限することなく、ゴールデン グリッド システムに基づいて流動的なレイアウトの Web サイトを構築しようとしています。

本文に不要な水平スクロールバーが表示されます。幅を無理に小さくすると消えてしまいます。ただし、流動的ではありません。

レイアウトは問題ないように見えますが、水平スクロールバーの原因となっている説明できない右側の不要なスペースだけです。

このマークアップがあるとしましょう:

#container は中央に配置され、1000px に固定されます。#header と #footer は 1000px で、#content-left と #content-right はそれぞれ 500px で左にフロートされます。

コンテナーが固定されている場合、ヘッダーとフッターの背景色をブラウザー ウィンドウの全長に拡張するにはどうすればよいですか?

列に分割したい 40 個の div があるとします。そして、各列の div の数をビューポートの高さに基づいてスケーリングする必要があります。

たとえば、ビューポートの高さが 1000px の場合、列ごとに 10 個の div が存在する可能性があります。高さ 500px にサイズ変更された場合、列ごとに 5 つの div があります。

これは CSS (および @media クエリ) で完全に行うことができますか?

960 Grid Systemに基づいてレイアウトを構築していました。私は固定 (px) バージョンが好きですが、流体 (%) バージョンを使用して、固定サイズの div をラップしたいと考えています。

問題は、これがすべてのブラウザーで機能しないことです。

• FF7：作品
• IE6 - 9: 動作します
• クロム：最悪
• サファリ：最悪
• iPad/iPhone:最悪
• オペラ：やばい

私が何を意味するかを見るために、私は小さなページを作りました。相対に変更するには、スイッチ ボタンをクリックします。同じように見えるはずですが、そうではありません:(

それに関するアイデアはありますか？

シュリンクラップされた左側のバーと流動的なメインパネルを備えたデザインを実装しようとしています。これにより、水平スクロールバーなしで、ウィンドウの幅に合わせてできるだけ多くの画像を表示できます。

私はこれを行うのに大きな問題を抱えています。コントロール バーをフロート:左に移動すると、メイン パネルのコンテンツがその周りを流れ始めます。メイン パネルもフローティングにすると解決しますが、コンテンツがシュリンク ラップされるため、画像が 1 列に並ぶ傾向があります。

これを行うためのエレガントなソリューションはありますか?

ここで問題のモックアップを作成しました: http://jsfiddle.net/PYKwg/2/embedded/result/

Fluids レイアウトとサイズ変更可能なテキスト Web ページのスタイルを設定するときは、関連するフォント サイズ (em の単位) と、現在スタイル設定されている要素のブロック幅 (パーセント単位) を常に念頭に置いておく必要があります。親要素の幅がどれであるか、または現在の要素またはその祖先のいずれかの font-size を変更した場合に、常に注意を払う必要があるのは時間の余裕です。

Dynamic Stylesheets (Sass または Less など) を使用すると、em およびパーセント計算 (単純な除算) の背後にある数学を処理する mixin または関数を簡単に実装できるため、サイズをピクセル単位で記述して変換を忘れることができますが、とにかく私の知る限り、それらを自動検出する方法がないため、関連するフォントサイズと含まれるブロック幅を提供します。

それを自動化するユーティリティのクラスがあるかどうか知っていますか? 何らかの方法でそれを達成するために何らかの努力がなされましたか?

流動的なレイアウトを設計しています (固定ピクセルなし、すべて % 単位)

私はHTMLを次のように持っています;

Firebug でチェックすると、親の高さは 400px として計算されます。

これを修正するにはどうすればよいですか?

CSSスプライトに使用する背景画像があります

問題は、流動的なレイアウト（％のみ、ピクセルなし）しか使用できず、％の位置付けにより、ブラウザーのサイズ変更中に問題が発生することです（たとえば、他の矢印の一部が表示されます）

これを修正するにはどうすればよいですか？背景に％ポジショニングを使用する方法の例を入手できますか？

次のように、2列の流体設計ベースのレイアウトを計画しています。

以下はHTMLコードです。

ここで、最初の列にはタイトルテキストの画像が含まれ、残りの幅は他のコンテンツに使用されます。

これが流動的なレイアウトであるため、私の問題はどこにも「px」幅を使用できないことです...使用するように定義imgしますmax-width:100%が、2列目の高さが高い場合、そのようなものはtitleText画像の下に空白（またはギャップ）を作成します。

ブラウザのサイズが変更されたときにページが適切に拡大縮小されるようにCSSを定義するにはどうすればよいですか。つまり、ブラウザのサイズに関係なく、titleText画像は2列目のコンテンツの高さとして全高を占めるように表示されます。

繰り返しますが、CSSではpxの幅や高さを使用できません。だから私は言うことができません、幅：200px;高さ：100px