4

これはおそらくどこかで答えられましたが、私はそれを見つけることができません:s

私の質問は、パーセンテージに基づく div の動的なサイズ変更についてです。

私が作成した例と考えられる解決策については、以下のコード例をご覧ください。サイズ変更を行うためのより良い方法があるかどうか尋ねます。

より詳細な説明:

人々が自分のページに挿入できるプラグインを書いているとしましょう。(ログインフォームを想像してください) . 先に進み、プラグインの div を設計します。メディア クエリを使用して、さまざまなデバイスに適した外観を実現しています。「body」要素の内部で div を直接処理します。デザインにはパーセンテージを使用します (パーセンテージが好きです)。div を80% widthに設定するとします。

今、私はこのプラグインをユーザーに提供します。ユーザーは先に進み、プラグインの div を幅100pxの別の div 内に配置します。今、すべてがひどく見えます。(100px の 80% は多くありません [80px]) . そしてもちろん、ユーザーが持っている小さな幅の div の中に私のプラグインを入れてもらいたいのです。

この問題に対するこれまでの解決策は、特定の幅のホルダー div を作成することでした。たとえば、ハードコード 300px です。(例 - jQuery UI の Datepicker div; Meteor のログイン ウィジェット div) . そして、以前に設定した 300px の幅が変更されないことを常に認識しているコードを作成します。

しかし、これがどれほど良い解決策かはわかりません。

さらに、幅をハードコーディングすることにした場合、プラグインには 1000px 程度の幅が必要になります。メディアクエリで div のサイズを変更したいからです。そして、幅をハードコーディングして（幅1000pxのホルダーdivなど）、ページに配置すると、ページに水平スクロールが表示されます。また、単純にホルダー div (親 div) を非表示にして、同時に子を表示することはできません。したがって、これには、ホルダー (親) div に position:relative を設定し、それをウィンドウの外側に配置し、子 div に同じものを使用する必要があります - 親オフセットの反対方向に同じオフセットを持つ position:relative 。

私はこれまでのところ明確であり、あなたを混乱させていないことを願っています!

私が話していることを説明するコード例: http://jsbin.com/ifawez/18/edit

4

2 に答える 2

1

@cimmanonのコメントは私にとって物事を解決しました。問題は、現時点で利用可能な HTML/CSS の「ツール」が不足していることにあります。レスポンシブ機能が登場したのはごく最近のことで、寸法の変更に対応する CSS ネイティブ ツールはあまり多くありません。

たとえば、メディアクエリはウィンドウ/ドキュメントの幅でのみ機能し、div などの他の要素では機能しません。

私が現在採用している解決策は、Javascript を使用して div の幅を決定し、それに応じてサイズを変更することです。サイズを変更するのは、表示する列の数です (cimmanon が提案するように Multi-Column モジュールを使用します)。これは Webkit ブラウザーでかなり安定しています。それはすべて Javascript (および jQuery の Sizzle) で行われるため、次のようなサイズの配列を保持します。

 var widthArray = [
    {min:0,   max:250,  columns:1, secondary:false},
    {min:251, max:350,  columns:1, secondary:true },
    {min:351, max:479,  columns:1, secondary:true },
    //more div sizes
 ];
 // more code here
 $(element).css({
    "column-count": object.columns,
    "-moz-column-count": object.columns,
    "-webkit-column-count": object.columns
});

これは一種のメディア クエリに似ていますが、画面サイズだけではなく、html 要素の幅を操作できます。

さらに、jQuery UI がそのコンポーネントを表示する方法に従います: 相対位置/絶対位置を使用します。

.outer_div {
    position: relative;
}
.inner_div_with_elements {
    position:   absolute;
    z-index: 1010;
    width: 99%;    
    float: left;
    overflow: hidden;
    ...
}
.inner_components_displayable {
    position: relative;
    display: block;
}
.inner_components_hidden {
    display: none;
}

要約すると：

  1. メディア クエリのみが画面のサイズで機能し、内部要素のサイズ変更は画面サイズのパーセンテージで実行できます。それらは非常に役立ちますが、画面外に基づくパーセンテージでコンポーネントを機能させるか、min-height や !important などを指定することになります (@Octavian の提案による)。
  2. 要素の Javascript 操作は現在より簡単ですが、よりコストのかかる代替手段です (jQuery SIzzle はかなり遅いです)。
  3. 多くのライブラリ (jQuery UI など) は、Javascript を位置相対/絶対位置と共に使用して、コンポーネント/プラグインがすべてのユーザーの画面サイズで適切に動作するようにします。
  4. メディアクエリと複数列のデザインを同時にエミュレートして、応答性を高めるために、位置をjavascriptと組み合わせることになりました。

参加してくれたみんなありがとう！

于 2013-07-25T14:46:33.370 に答える