0

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

取一个 960gs 的 16 列网格，按 2:12:2 的比例分成三部分，即百分比宽度为 12.5:75:12.5。这适用于大屏幕尺寸。对于较小的屏幕，通常最好放弃列布局并简单地将东西堆叠在另一个下方 - 这就是我通常所做的。但是，如果您想保留网格布局怎么办？将比例更改为预设“地板”宽度以下的系统会很好。

我在这里大声思考，并计划看看我能不能想出点什么来。但是，我不想重新发明轮子，所以任何指向“它已经完成”的指针都会非常感激。

4

1 回答 1

0

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

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

  2. 给容器 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 像素。我的示例假设有两个网格单元。如果您有超过 2 个单元格，则只需放入

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

后面是一个工作示例的链接。

于 2012-12-13T07:26:18.627 回答