CSS-сетки и адаптивный дизайн - PullRequest
Новая
       25

CSS-сетки и адаптивный дизайн

2 голосов
/ 25 августа 2011

Я планирую использовать грид-систему для сайта, но я хотел бы иметь возможность выборочно разбивать сетку.Это будет означать, например, превращение OOCSS size1of2 в size1of1).В идеале, HTML должен выглядеть примерно так: 

<div class="line">
    <div class="unit size1of2 respond-480">
        <h3>1/2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="unit size1of2 respond-480 lastUnit">
        <h3>1/2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

Тогда у меня будет что-то вроде следующего CSS: 

@media screen and (max-device-width: 480px) {
    .respond-480 {
        /* something to linearize the box */
    }
}

Кто-нибудь знает способ сделать это с OOCSSили другая сеточная система?Я ищу этот уровень контроля, в отличие от более простой отзывчивой сетки .

Ответы [ 3 ]

3 голосов
/ 25 августа 2011

Оказывается, имеет смысл добавлять класс respond480 к строке, а не к единице. Неудивительно. Следующий код работает довольно хорошо для современных браузеров. Я использовал дочерний селектор, чтобы упростить вещи - хотя можно обойти эту проблему, старые браузеры (IE <6) все равно не поддерживают эти медиазапросы. </p> 

@media screen and (max-width: 480px) {
    .respond480 > .unit {
        width: auto;
        float: none;
    }
}

Я копался в источнике OOCSS и наткнулся на grids/grids_iphone.css. Это придает некоторую достоверность моей стратегии. Кто-нибудь знает, является ли !important обязательным? Селективность, кажется, работает для меня без нее - возможно, из-за двух селекторов классов. 

@media screen and (max-width: 319px) {
    .unit {
        float: none !important;
        width: auto !important;
    }
}

И вот страница , показывающая это в действии . Я использовал тест сетки Николь Салливан из Arnaud Gueras, но с более наполненным текстом. Обратите внимание, что я оставил один сегмент 2of2 преднамеренно не линеаризованным, чтобы продемонстрировать, что необязательно для линеаризации всего.

0 голосов
/ 26 марта 2013

Оформить Каскадные рамки .Он имеет архитектуру OOCSS и поддерживает адаптивный дизайн «из коробки» (хотя он не является обязательным и может быть опущен при желании).

С помощью Cascade Framework ваш пример будет реализован так: 

<div class="col">
    <div class="col size1of2">
        <div class="cell">
            <h3>1/2</h3>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
    <div class="col sizefill">
        <div class="cell">
            <h3>1/2</h3>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
</div>
0 голосов
/ 02 мая 2012

Поскольку она сказала избегать !important, если это не конечный узел на конференции Velocity , странно, как она вставит это в свой код.

enter image description here

...