Строгая структура жидкости |Плагин jQuery

Question

Просмотр jsFiddle или же Просмотр JS Bin

У меня сегодня была идея, которая могла бы объединить макеты Fluid и фиксированной ширины, а также ускорить создание адаптивных макетов. Это также улучшит работу с процентами в макетах.

Для этого я использую идею, аналогичную Frameless Grid system .

"Адаптировать столбец за столбцом, а не пиксель за пикселем."

Вместо того, чтобы использовать столбцы, я настраиваю размер 1 unit за раз. Пример jsFiddle регулирует 10px за раз, пример показывает, как это может быть полезно при использовании процентов. Для этого используются стили @media с max-width и min-width.

Проблема, с которой я столкнулся, заключается в том, что у вас быстро появляется множество @media стилей, и вам придется вручную вводить каждый из них. Поэтому я подумал, что он может просто использовать довольно простой плагин jQuery. Тем не менее, у меня ограниченное знание jQuery, поэтому у меня есть только смутное представление о том, как это можно сделать, что я описал в jsFiddle .

Просмотр jsFiddle или же Просмотр JS Bin

Вот некоторые из стилей CSS @media:

@media only screen and (max-width: 249px) {.test.two {width: 240px}}
@media only screen and (max-width: 259px) and (min-width: 250px) {.test.two {width: 250px}}
...
@media only screen and (max-width: 1259px) and (min-width: 1250px) {.test.two {width: 1250px}}
@media only screen and (min-width: 1260px) {.test.two {width: 1260px}}

И намеченная jQuery Fiddle

$('.test.two').strictfluid(10px 240px 1260px); // Apply function

var resizeEvery = 'first (10px)';
var minWidth = 'second (240px)';
var maxWidth = 'third (1260px)';

var calculate = minWidth;

// First @media :
"@media only screen and (max-width: " + (min-width + (resizeEvery - 1)) + " ) {" + min-width +"}}"

    calculate = calculate + resizeEvery;

// Middle @media's (Repeat While {calculate < maxWidth})
"@media only screen and (max-width: " + (calculate + (resizeEvery - 1)) + " ) and (min-width: " + (calculate) + " ) {" + (calculate) +"}}"

    calculate = calculate + resizeEvery;

// Last @media : 
"@media only screen and (min-width: " + (max-width) + " ) {" + max-width +"}}"

Просмотр jsFiddle или же Просмотр корзины JS