0

960gsやスケルトングリッドなどのグリッド幅のCSSルールは非常に適切であり、私は時々それらを使用します。しかし、私は疑問に思っていました...利用可能なウィンドウ幅/画面幅に応じて相対的なグリッドセル幅が変化するバリアントを誰かが作成しました。私が言いたいのはこれです

2：12：2の比率で3つの部分に分割された960gs 16列グリッド、つまり12.5：75：12.5のパーセンテージ幅を取ります。これは、大きな画面サイズでうまく機能します。画面が小さい場合は、通常、列のレイアウトを削除して、物を上下に積み重ねる方がよいでしょう。これが、私が一般的に行っていることです。しかし、グリッドレイアウトを保持したい場合はどうでしょうか？事前設定された「床」幅より下の比率を変更するシステムがあれば便利です。

私はここで部分的に声を出して考えており、何かを思い付くことができるかどうかを確認する予定です。しかし、私は車輪の再発明をしたくないので、「すでに行われている」というポインタをいただければ幸いです。

4

1 に答える 1

0

このスレッドに遭遇した人へのメモ。簡単な答え-スクリプトのサポートがなければ、おそらくそれは不可能です。いくつかのスクリプトを使用できる場合、解決策は比較的簡単です。簡単な手順

  1. パーセンテージグリッドセルをコンテナdivでラップします

  2. コンテナdivにダミークラス（「flx」など）とデータ属性（data-flxなど）を指定します。このクラスでは、次の行に沿ってJSONのスポットを配置します。

    {"a"： "8"、 "b"： "16"、 "w"：100000}、{"a"： "18"、 "b"： "6"、 "w"： "500"}、 {"a"： "12"、 "b"： "12"、 "w"： "400"}]

基本的に、デバイス/画面の幅が「床」の幅を下回る場合に使用するグリッドセルの比率を定義します。w：100000は、大画面で機能するデフォルトです。ここでは、400ピクセルと500ピクセルの2つの追加のフロアレベルを定義しました。ここでの私の例は、2つのグリッドセルを想定しています。2つ以上のセルがある場合は

"c":"proportion", "d":"proportion"

など。必要なもう1つのビットは、jQueryコードのスポットです。

$(document).ready(function()
{$(window).bind("orientationchange resize pageshow",scaleGrids());}

function scaleGrids()
{

 function adaptIt(w,grd)
 {
  var fvd = $(grd).data('flx');
  var ndx = 0;
  for(var i=1;i < 3;i++) if (w < fvd[i].w) ndx = i;
  //the "floor" to use has now been established as fvd[ndx]

  fvd = fvd[ndx];
  var ckls = new Array();
  var cells = $(grd).children();
  ckls.push('st_' + fvd.a);
  ckls.push('st_' + fvd.b);
  //for convenience  we push the proportions to use into an array

  ndx = 0;
  $.each(cells,function(i,cell){$(cell).removeClass().addClass(ckls[ndx++])});
  //iteratively reclass each cell in the grid 
 }

 var w = $(window).width();
 $.each($('.flx'),function(ndx,grd){adaptIt(w,grd)});
 //iteratively rescale each element bearing the class flx
}

簡単な説明-画面のサイズが変更されたとき、またはデバイスが回転したとき、私たちは自分自身を見つける「床」を確立します。クラス「flx」を持つすべてのDOM要素について、子（グリッドセル）を反復処理し、現在のすべてのクラス宣言を取り除き、新しい宣言を追加します。

最後に、これを実際に機能させるには、かなり細かいグリッドセルユニットサイズを使用する必要があります。私は24列のグリッドを使用してjQueryMobileを操作しています。必要なCSSを作成するのは簡単ですが、完全を期すために、とにかくここでそれを提供します。

.st_1,.st_2,.st_3,.st_4,.st_5,.st_6,.st_7,.st_8,
.st_9,.st_10,.st_11,.st_12,.st_13,.st_14,.st_15,.st_16,
.st_17,.st_18,.st_19,.st_20,.st_21,.st_22,.st_23,.st_24
{margin:0;padding:0;border:0;float:left;}


.flex24{min-height:1em;overflow:hidden;padding:0;margin:0}

.flex24 .st_1{width:4.16666666666667%;}
.flex24 .st_2{width:8.333333333333333%;}
.flex24 .st_3{width:12.5%;}
.flex24 .st_4{width:16.666666666667%;}
.flex24 .st_5{width:20.833333333333%;}
.flex24 .st_6{width:25%;}
.flex24 .st_7{width:29.166666666667%;}
.flex24 .st_8{width:33.33333333333%;}
.flex24 .st_9{width:37.5%;}
.flex24 .st_10{width:41.66666666667%;}
.flex24 .st_11{width:45.83333333333%;}
.flex24 .st_12{width:50%;}
.flex24 .st_13{width:54.16666666667%}
.flex24 .st_14{width:58.33333333333%}
.flex24 .st_15{width:62.5%;}
.flex24 .st_16{width:66.66666666667%;}
.flex24 .st_17{width:70.83333333333%;}
.flex24 .st_18{width:75%;}
.flex24 .st_19{width:79.16666666667%;}
.flex24 .st_20{width:83.33333333333%;}
.flex24 .st_21{width:87.5%;}
.flex24 .st_22{width:91.66666666667%;}
.flex24 .st_23{width:95.83333333333%;}
.flex24 .st_24{width:100%;}

実例へのリンクが続きます。

于 2012-12-13T07:26:18.627 に答える