CSS жидкости сетки в браузерах - PullRequest
Новая
       22

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

0 голосов
/ 12 июля 2011

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

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

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

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

Спасибо за тонну!Санджай

Ответы [ 2 ]

1 голос
/ 19 июля 2011

Я не знаю, что вы имеете в виду, говоря "отзывчивый макет", но если речь идет о ширине жидкости, то ответ один. Сетки 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 и т. Д.) Check:

asyncode.com

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

docs.asyncode.com / текст / RichML ссылка

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

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

0 голосов
/ 12 июля 2011

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

...