問題タブ [liquid-layout]

私はこの液体レイアウトのことはまったく初めてです。私たちのほとんどと同じように、私のレイアウト コンポーネントのほとんどは "液化" しますが、残念ながら画像はそうではないことに気付きました。

max-width: 100%そのため、いくつかの場所で提案されているように、画像を使用しようとしています。

ただし、 img containermax-widthのとの定義にもかかわらず、imgはスケーリングしません。min-height

広い解像度で見ると、たとえば「子供の画像」が拡大縮小されていないことに気付くでしょう。

問題が何であるかについての手がかりはありますか?なぜその画像は拡大縮小されませんか?

テストケース：

ブラウザ: Firefox 15.0 / Chrome 21.0

IOS: MAC OS X ライオン - 10.7.3

解像度: 1920x1200

私が得るもの： コンテナの最後まで拡大縮小されない画像を取得します。img の幅は、articleそれを含む要素に収まりません。

私が期待していること： コンテナの最後に到達するまで、画像が拡大することを期待しています。視覚的には、画像の右側が下の段落の右側と垂直方向に整列するように、画像がすぐ下の段落と同じ幅になることを期待しています。

現在、Firefox と Internet Explorer (!) だけがmin-resolutionとmax-resolutionCSS メディア クエリをサポートしているようです (こちらとこちらを参照)。Webkit ブラウザーでのこれらのメディア クエリのサポートはいつ期待できますか? 具体的には、Chrome と Safari のどのバージョンがサポートされますか? クエリが開発ビルドでサポートされていない場合、それらのサポートは予定されていますか? Retina ディスプレイ搭載の Macbook Pro の Safari がまだこのクエリをサポートしていないのは皮肉なことです。

助けてくれてありがとう！

最初は、を設定せず、次のようfont-sizeに長いテキストを挿入します。div

ブラウザを絞り込むと、オーバーフロー部分が次の行に変わります。

しかし、テキストfont-sizeサイズを大きいサイズに設定すると、次のようになります。

ブラウザを絞り込みましたが、オーバーフロー部分を次の行に変更できませんでした。

こちらのデモ

では、なぜこれが起こったのでしょうか？どうすれば問題を解決できますか？どんなに大きなサイズに設定してもfont-size、レイアウトは通常通り流動的です

タブレットとモバイルで無効にしたい次のスニペットがあります。

そして、私は次のように、メディアクエリか何かの中にラップすることを考えていました:

しかし、これは機能しないと確信しています。このコードがモバイルで機能しないようにするにはどうすればよいですか?

私はこのクラスのdivを持っています:

これを Web 開発者ツールで調べると、ブラウザーが要素の幅と高さをどのように計算するかがわかります。

Internet Explorer 9 --> 854.24 x 26.05

Firefox 15.01 --> 854×28

サファリ5.1.7 --> 843×27

クロム 22.0.1229.94 m --> 951 x 36

上記のように、Chrome は別の方法で % を計算します。どうすればこれを解決できますか? これはバグですか？Safari も webkit を使用しますが、その問題はありません。

私は、フォントサイズからレイアウト（幅、余白、パディングなど）まで、すべてにemを広範囲に使用している古いプロジェクトに取り組んでいますが、フォントだけでなくページのレイアウトにもemを使用することに実際に何か利点があるのだろうかと思いました。 ？

私はフォントにemを使用しないようにしていますが、特にbody { font-size: 62.5%; }トリックがないと少し混乱します（これは明らかに悪いことです）。そして私が知る限り、今日のすべてのブラウザは適切にピクセルのサイズを設定しています。

私の知る限り、このメタタグはモバイルブラウザに標準サイズのピクセルを表示させる必要があります。

CSS 2.1仕様から：

参照ピクセルは、ピクセル密度が96dpiで、リーダーから腕の長さの距離にあるデバイス上の1ピクセルの視角です。したがって、公称アームの長さが28インチの場合、視角は約0.0213度になります。したがって、腕の長さで読み取る場合、1pxは約0.26 mm（1/96インチ）に相当します。

私が本当に尋ねようとしている質問は、レイアウトやフォントサイズのサイズを変更するときにemがpxよりも優れているかどうかです（emがオンサイトのフォントサイズ変更機能を作成できるという事実を除いて）？それとも、em vs pxがもっと好みの問題になっているのでしょうか？

次のレイアウト構造に取り組んでいます。

次の CSS を使用して、フッターをページの下部に設定します。

「pageContainer div」のコンテンツが小さい場合、div にスクロール バーを表示したくありませんが、「pageContainer div」の下部にフッターを追加します (フッターは常にページの下部にあるわけではありません)。ビューポート)

「pageContainer div」のコンテンツが長い場合、フッターをビューポート (下部) に表示したままにし、「pageContainer div」にスクロール バーを表示する必要があります。

どうすればいいですか？何か案は？ありがとう！

PS: JS を使用しないソリューションが必要です。

私は時々 3 つ、時には 4 つの要素を持つコンテナーを持っています。コンテナの高さは一定です。

このような垂直リキッド レイアウトのための CSS ベースの方法について、何か素晴らしいアイデアはありますか?

つまり、子供たちの身長は 25% か 33% のどちらかですが、それは自分で判断できるのでしょうか? （賢い子供たち。） 編集 もちろん、必ずしもパーセンテージベースである必要はありません...

私は PHP ベースのことをかなり簡単に行うことができますが、より洗練されたソリューションがあればよいでしょう。

このWebサイトwww.emblematiq.comでは、レイアウトは流体/液体です。私はコードを見ていましたが、それがどのように達成されるのか理解できないようです。canvas要素の幅が1180pxの固定幅レイアウトのように見えます。

見つからないようです

1. CSSのメディアクエリ。
2. 幅は％ではなくpxで設定されます。
3. 関連するJavaScript/jQueryはそれに関連していないようです。

私は明らかな何かを見逃していると確信していますが、私の人生の間、それに対する責任のあるコードを見つけることができません。

それで、これはそれをより明確にするための関連するマークアップです（私はこれもjsFiddleに入れました）：

HTML

CSS

ここにはいくつかの重要なポイントがあります。

• 私はWindows上でのみGoogleChromeをターゲットにする必要があるという幸運な立場にあるので、IE8などについて心配する必要はありません。
• 中央の「editor」divにはオーバーフローが設定されているため、コンテンツが大きくなりすぎたときに垂直スクロールバーが機能します。
• 左側の「nav」divはサイズ変更可能で、右下のハンドルをつかみ、これを使用して水平方向にサイズを変更できます。
• 上部にある「details」divもサイズ変更可能です。右下のハンドルをつかんで、垂直方向にサイズを変更できます。
• 'details'と'toolbar'divsに固定の高さを与えたくありません。

私が抱えている問題は、中央の「editor」divがoverflow-y : scroll設定されていても大きすぎることです。スクロールバーは表示されますが、その下部の範囲はフッターを超えており、実際にはページの端から外れています。

ページ全体の高さを減らすと（たとえば、jsFiddleで水平スプリッターを調整することにより）、中央の「エディター」divのサイズが減少することがわかります（それに応じてスクロールバーが大きくなります）。ただし、全体的な高さは大きすぎます。

'nav' divの幅を左に大きくすると（resize-handleを使用）、それに応じて中央の'editor'divのスクロールバーも大きくなります。これはすばらしいことです。繰り返しになりますが、結果として得られる全体の高さが大きすぎるという事実は別として。

'details'および'toolbar'divの内容は折り返す必要があります。たとえば、（resize-handleを使用して）「nav」divの幅を十分に大きくすると、「Button1 / Button2 / etc」の内容が折り返され始め、それに応じて「editor」divが下に移動します。'editor' divの高さも、これを考慮する必要があります。

最後に、「detail」divの高さを増やすと（ここでもresize-handleを使用）、中央の「editor」divの高さにまったく影響がないことがわかります。ページの端を超えて押し下げられるだけで、スクロールバーの高さは変わりません。

height: 100%これは、「editor」divに設定した祖先要素の高さを使用しているために発生していると思います。これは、正しくない、おそらくbody要素です。しかし、私はそれについて何をすべきかわかりません。

理想的には、純粋なCSSソリューションを使用します。これは、JavaScriptを使用する場合、ナビゲーションと詳細divのサイズ変更、画面のサイズ変更、ページの読み込みなど、さまざまなイベントを処理する必要があるためです。単純な場合は、JavaScriptソリューションを受け入れてください。

確かに、シンプルさは本当に私がここで何よりも求めているものです。

私はこれのさまざまな側面に対するさまざまな解決策を単独で見てきましたが、それらをすべてまとめるものは何もありません。