css - 寻求规则

Question

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

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

我正在部分地大声思考，并计划看看我是否能想出点什么。但是，我不想重新发明轮子，因此非常感谢任何指向“它已经完成”的指示。

Answer 1

给遇到此线程的任何人的注意事项。简短的回答——如果没有一些脚本支持，这可能是不可能的。如果您可以使用一些脚本，那么解决方案就相对简单了。简要步骤

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 个单元格，只需放入

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

随后将提供指向工作示例的链接。