2

私は動的なサイズのグリッドレイアウトを構築しました。これは、任意のサイズの解像度（電話、タブレット、デスクトップ）に適度に適応し、サイズ変更を処理できますが、すべてピクセルパーフェクトに近い状態です（申し訳ありませんが、私はOCDです。 「私の計算は現在壊れており、片側が1ピクセルずれているパディングなしでは、2つの均等なサイズの要素を奇数サイズのコンテナ内に収めることができないためです）。

とにかく、以下は私がJavaScriptと一緒にハッキングしたものへのリンクです。それは私がやろうとしていることの例です。下のペインの幅を少し変更して、何をしようとしているのかを確認します。

http://jsfiddle.net/langdonx/uFW2C/2/

Angularに移植された醜い手動JavaScriptがいくつかありますが、それでもすべてのスタイルを計算する醜いJavaScriptが残っています。

だから私の質問...厳密にCSSでこれをやってのけることができますか？または、CSSを大幅に増やし、JavaScriptを大幅に減らしますか？これは、画面の幅に基づいて動的にサイズ設定されたセルを意味しますか？

ビジネスルールは次のとおりです。

  • 最大セル幅：320px
  • 行あたりの最小セル数：2
    • これはCSSでは不可能かもしれないので、最小セル幅：Galaxy NexusのChromeの場合は178（ポートモードは360px幅）で問題ありません
  • セルの境界線：5px、2pxのアウトライン
  • セル間の目に見えるマージン：3px（マージンは実際には5pxですが、outlineブリードアウトします）

この例では、サイズ変更時にセルを毎回再描画していますが、Angularバージョンでは、スタイルだけが更新されると思います。そうは言っても、サイズ変更時に再描画することでうまくいく可能性がtableありますが、ドキュメントの幅に基づいてセルの幅を計算するだけで済みます。そうですね...を使用することにワクワクすることはありませんtable。= [

-狂った暴言を終わらせる

4

1 に答える 1

2

メディアクエリ

CSSメディアクエリを使用すると、CSSのみのソリューションにかなり近づく可能性があります。

ここでの重要な概念は、ブラウザの幅に基づいてさまざまなレイアウトグリッドを使用して、列の数を変えることです。

メディアクエリは、ブラウザの幅に基づいてレイアウトを変更するための自然なCSSの方法です。また、JavaScriptは必要ありません。使用するレイアウトグリッドを制御するために一連のメディアクエリ（それぞれが異なる範囲のブラウザ幅をターゲットにしている）を使用する場合、各グリッドが実行する必要があるのは、応答性（各列の幅のパーセンテージ）です。コンテンツは列幅を満たすようにストレッチされます。

レスポンシブデザイン

問題は次のようになります。CSSのみを使用して、各コンテンツを自動的に拡大して列を埋めることは可能ですか。それは、コンテンツの種類、コンテンツが伸びたときにどのように動作すると予想されるか、グラフィックデザインに妥協の余地があるかどうかによって異なります。

通常、レスポンシブWebサイトのグラフィックデザインは、レスポンシブデザインの制限に合わせて調整する必要があります（グラフィックデザイナーは、何が実行可能で何が実行不可能かを大まかに把握しています）。しかし...自動的に実行できないものはすべて、JavaScriptを使用して実行できます。

コンテンツの拡大を試みるための関連する検索用語：レスポンシブデザイン、アダプティブコンテンツ、Fluid Grid

注：この場合の「列」は、各コンテンツのフロートコンテナーに使用される幅のパーセンテージを意味する場合があります。従来の意味で、「物理的な」列を意味する必要はありません。

于 2013-03-27T06:16:41.167 に答える