CSS жидкости сетки в браузерах

Я создаю систему сетки для нескольких наших собственных приложений / порталов. У нас есть основная ширина сетки и желоба и т.д.; но мы рассматриваем возможность сделать сетки немного отзывчивыми. Учитывая это, мы хотели создать упругую сеточную систему. В то время как Итан Маркотт тщательно описывает основы адаптивного дизайна в своей книге, он не рассматривает вопрос о влиянии этого подхода в браузерах... вздох..

Насколько я исследовал, процентная ширина (которая важна для гибкой / эластичной компоновки) была основной болью для Opera + Safari. Это распространенная ошибка в Opera, и даже жидкие 960gs неисправны в Opera + Safari.

Единственное место, где я мог найти рабочую ширину в процентах, было в YUI2. Любой YUI-разработчик, заинтересованный в том, чтобы подробно описать, как они работают в процентах по ширине в Opera / Safari??

Это SOS для опытных разработчиков и создателей грид, которые могли бы посоветовать / порекомендовать обходные пути / решения, чтобы заставить такую ​​штуку работать в браузерах.

Благодаря тонну! Санджай

Источник

2 ответа

Решение

Я думаю, что это может помочь вам в этом. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Источник

Я не знаю, что вы имеете в виду, говоря "отзывчивый макет", но если речь идет о ширине жидкости, то ответ один. Сетки OOCSS.

Вы должны помнить, что строки и единицы (столбцы) не могут иметь поля и отступы здесь. Внутренние элементы могут иметь их. "Объектно-ориентированный CSS" - это идея, когда вы используете несколько классов в одном HTML-теге, чтобы вы могли создать класс:

.inner{
    margin:16px; /* or whatever CSS size you like */ 
}

и примените его к каждому прямому дочернему элементу строки или столбца, например:

<div class="myContent inner"/>

Вы можете вкладывать строки в строки, но не столбцы в столбцах.

.wfull{
    width:100%;
    background:orange;
}
.w950{
    width:950px;
}
<div class="line wfull">
    <div class="line w950"/>
</div>

Если вы хотите увидеть более сложный рабочий пример OOCSS (я значительно улучшил сетки и изменил имена: line->container, unit->column, size1of2->half и так далее), проверьте:

http://asyncode.com/

Вот (еще не завершено) документация по моим улучшениям:

http://docs.asyncode.com/text/RichML-reference

OOCSS там работает за кулисами, но имена копируются 1:1 в HTML, так что вы будете знать, о чем он.

Я тестировал OOCSS во многих браузерах, и не было ни одного, который бы не справился с этим. Это стало возможным из-за очень неприятных CSS-хаков, которые Николь Салливан нашла или изобрела - не пытайтесь делать это дома:).

Источник
Другие вопросы по тегам