Question

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

将960gs 16柱网格分成3个部分，比例为2：12：2，即百分比宽度为12.5：75：12.5。这适用于大屏幕尺寸。对于较小的屏幕，通常最好放弃列布局并简单地将事物堆叠在另一个之下 - 这就是我通常所做的。但是如果你想保留网格布局呢？将比例改变到预设“地板”宽度以下的系统会很不错。

我在这里大声思考，并计划看看我是否可以拿出一些东西。但是，我不想重新发明轮子所以任何指向“它已经完成”的指针都将非常感激。

Answer 1

任何遇到此线程的人的注释。简短的回答 - 没有一些脚本支持它可能是不可能的。如果您可以使用某些脚本，则解决方案相对简单。简单的步骤

将百分比网格单元格包装在容器div中
给容器div一个虚拟类，比如“flx”和一个数据属性，比如data-flx，你可以在其中放入一个JSON点

{ “一个”： “8”， “B”： “16”， “W”：100000}，{ “一个”： “18”， “B”： “6”， “W”：“500 “}，{” 一 “：” 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
}

简要说明 - 当屏幕调整大小或设备旋转时，我们建立了我们发现自己的“楼层”。对于带有类“flx”的所有DOM元素，我们遍历它们的子节点（网格单元格），去掉所有当前的类声明并添加新的声明。

最后要注意的是 - 为了真正起作用，你需要使用非常精细的网格单元尺寸。我使用24列网格来使用jQuery Mobile。很容易找出必要的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%;}

以下是工作示例的链接。

寻求规则

1 个答案: