Css 寻求规则

百分比网格宽度CSS规则，如960gs和骨架网格非常整洁，我经常使用它们。然而，我想知道。。。有人创建了一个变体，其中相对网格单元宽度根据可用窗口宽度/屏幕宽度而变化。我的意思是

以960gs 16柱网轴线为例，按2:12:2的比例分为三部分，即12.5:75:12.5的百分比宽度。这适用于大屏幕尺寸。对于较小的屏幕，通常最好放下列布局，简单地将一个东西堆叠在另一个下面——这就是我通常做的。但是如果你想保留网格布局呢？一个在预设的“地板”宽度下改变比例的系统会很好

---

我在这里想了一部分，并计划看看我是否能想出一些办法。但是，我不想重新发明轮子，因此任何指向“已经完成”的指针都将非常感谢。

给任何遇到此线程的人的提示。简单的回答是，如果没有一些脚本支持，这可能是不可能的。如果您可以使用一些脚本，那么解决方案相对简单。这些步骤很简单

将百分比网格单元包装在容器div中

为container div提供一个伪类，比如说“flx”和一个数据属性，比如说data flx，在其中沿

{“a”：“8”，“b”：“16”，“w”：100000}，{“a”：“18”，“b”：“6”，“w”：“500”}，{“a”：“12”，“b”：“12”，“w”：“400”}]

本质上，我们定义了当设备/屏幕宽度超过“地板”宽度时要使用的网格单元比例。w:100000是适用于大屏幕的默认值。在这里，我定义了两个额外的楼层-400像素和500像素。我这里的示例假设有两个网格单元。如果你有两个以上的电池，就把它放进去

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

等等。您需要的另一点是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
}

下面将提供一个指向工作示例的链接

.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%;}