В поисках правила

CSS-правила процентной ширины сетки, такие как 960gs и Skeleton grid, очень удобны, и я использую их время от времени. Однако мне было интересно... кто-то создал вариант, в котором относительная ширина ячеек сетки изменяется в зависимости от доступной ширины окна/ширины экрана. Я имею в виду это

Возьмите сетку из 16 столбцов размером 960 г, разделенную на три части в пропорции 2:12:2, то есть с шириной в процентах 12,5:75:12,5. Это хорошо работает для больших размеров экрана. Для небольших экранов, как правило, лучше отказаться от расположения столбцов и просто расположить элементы один под другим — что я обычно и делаю. Но что, если вы хотите сохранить сетку? Система, которая изменяет пропорции ниже предустановленной ширины «пола», была бы хороша.

Я частично размышляю здесь вслух и планирую посмотреть, смогу ли я что-нибудь придумать. Тем не менее, я не хочу изобретать велосипед, поэтому любые указания на то, что «это уже было сделано», будут высоко оценены.


css 960.gs
person DroidOS    schedule 12.12.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Примечание для всех, кто заходит в эту тему. Краткий ответ - без какой-либо поддержки скриптов это, вероятно, невозможно. Если вы можете жить с некоторыми сценариями, решение относительно простое. Кратко о шагах

  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
}

Краткое пояснение - при изменении размера экрана, или повороте устройства мы устанавливаем "этаж", на котором оказываемся. Для всех элементов DOM, имеющих класс «flx», мы перебираем их дочерние элементы (ячейки сетки), удаляем все текущие объявления классов и добавляем новые.

И последнее замечание — чтобы это действительно работало, вам нужно использовать довольно мелкий размер ячейки сетки. Я использую сетку из 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%;}

Далее будет ссылка на рабочий пример.

person DroidOS    schedule 13.12.2012