Резиновые блоки с пропорциональными размерами

[a.antropov]

Я думаю решение есть, но не знаю, как оно называется и по каким ключевым словам искать. Нужно реализовать пару резиновых сеток из 8 и 6 блоков с пропорциональными размерами. Прикреплю изображения, чтобы было наглядно.

 

 

 

В первом случае это квадраты, сторона квадрата = 25% ширины окна браузера. Во втором случае 4 квадрата и 2 прамоугольника, сторона квадрата = 25% ширины окна браузера, наибольшая сторона прямоугольника = 50% ширины окна браузера.

 

Надеюсь, можно обойтись без скриптов, если да, то что использовать? Что-то у меня нет никаких идей по поводу пропорционального изменния высоты блоков. Спасибо.

[mrnobody]

http://jsfiddle.net/mrnobody/4p85v/

 

Фуллскрин: http://fiddle.jshell.net/mrnobody/4p85v/show/

 

 

Вот еще нашел похожую тему )

http://htmlforum.ru/index.php?showtopic=48280

Edited April 26, 2014 by mrnobody

[SelenIT]

Еще можно использовать единицу vw, если матрица браузеров (IE9+) позволяет.

[a.antropov]

http://jsfiddle.net/mrnobody/4p85v/

 

Обалдеть, аж готовый код выложили, огромнейшее спасибо Вот только мне не понятны значения верхних отступов псевдоэлементов и почему они так влияют на данную разметку?

Еще можно использовать единицу vw, если матрица браузеров (IE9+) позволяет.

 

Хм. тоже вариант, спасибо, только что узнал об этой единице измерения. Только интересует, поддержка мобильных браузеров для андроида, к сожалению, нет устройства на этой ОС, чтобы проверить. Вы не знаете?

[mrnobody]

При указании паддингов и маржинов в процентах значение расчитывается от ширины родительского блока, следовательно, если ширина родительского блока 64px, то если мы укажем дочернему элементу padding-top/padding-bottom либо marin-top/margin-bottom равным 100%, то вертикальный паддинг или маржин станет равным 64px, и он растянет родительский элемент на 64px, если укажем 50%, то будет 32px.

 

Поддержка браузерами вьювпорт единиц — http://caniuse.com/#feat=viewport-units

[Sensei]

http://caniuse.com/#search=vw опередили )

Edited April 26, 2014 by Sensei

[a.antropov]

mrnobody, точно же, спасибо. Это, оказывается, даже слишком просто. Вот только нужно срочно освежить теорию)

[amelice]

При указании паддингов и маржинов в процентах значение расчитывается от ширины родительского блока, следовательно, если ширина родительского блока 64px, то если мы укажем дочернему элементу padding-top/padding-bottom либо marin-top/margin-bottom равным 100%, то вертикальный паддинг или маржин станет равным 64px, и он растянет родительский элемент на 64px, если укажем 50%, то будет 32px.

 

Поддержка браузерами вьювпорт единиц — http://caniuse.com/#feat=viewport-units

а зачем все усложнять, если при добавлении незначительного контента в разметку все рушится?

http://jsfiddle.net/4p85v/2/  в таком случае можно было обойтись обычным height-ом, без всяких псевдо-элементов. Хотябы будешь уверен, что до определенной высоты, не обрушится все.

[Sensei]

Это зависит от задачи. Я, например, подобным образом делал клавиатуру, а символы на клавишах позиционировал абсолютно.

[a.antropov]

в таком случае можно было обойтись обычным height-ом

 если бы можно было обойтись этим, я б сюда не обращался. Понятно, что напрямую простой текст туда пихать не надо, мне, например, это нужно было для организации фотогалереи. Хотя и узнал о viewport-единицах.

[SelenIT]

Чаще всего абсолютное позиционирование и выручает. Кстати, без псевдиков действительно можно обойтись (только размеры padding-ов придется отсчитывать от внешнего контейнера, а не самого блока). А в чем проблема с галереей (особ. при условии, что превьюшки уже имеют нужные пропорции)?

[amelice]

если бы можно было обойтись этим, я б сюда не обращался

Мне без разницы - куда бы вы обращались.

 

Понятно, что напрямую простой текст туда пихать не надо,

Откуда понятно? Телепатией не владею.

 

это нужно было для организации фотогалереи. Хотя и узнал о viewport-единицах.

Я рада за вас.

Обращалась  не к вам, если вы мои вопросы приняли как критику или как угрозу для вашей безопасности, то успокойтесь )

Я хотела просто узнать почему таким образом решили вопрос.

Edited April 29, 2014 by amelice