Отзывчивая сетка CSS, которая не зависит от размера блока

Я пытался найти ответ на этот вопрос как в Google, так и на этом сайте.

У меня есть сайт, который нужно сделать адаптивным. Это относительно сложно, но это определенно возможно с дизайном, который у нас есть в настоящее время.

Мой вопрос заключается в следующем. Существует ли адаптивная сеточная система или пример полностью адаптивной сеточной системы, которая НЕ полагается на размер блока: border-box. Посмотрев на Pure и Bootstrap, кажется, что оба полагаются на это свойство, чтобы заставить его работать.

Размышляя об этом на практике, мне кажется, что модель box-sizing:border-box потребуется для надлежащего использования процентов.

Почему я не могу использовать этот метод? Для этого проекта абсолютно необходима поддержка IE7. Я знаю, что есть полифилы и файлы htc, которые можно использовать для принудительной поддержки, однако масштаб и размер этого сайта затрудняют реализацию этих вариантов. Из того, что я читал, эти параметры следует использовать умеренно, а сайт такого калибра нельзя использовать умеренно.

Спасибо.


css grid border-box
person RAF0255    schedule 09.01.2014    source источник
comment
Вы можете сделать специальный CSS-файл для IE7. Также пришло время понять, что IE7 довольно устарел и не используется gs.statcounter.com/   -  person DaniP    schedule 09.01.2014
comment
Я начинаю все больше и больше думать, что для IE7 потребуется собственный файл CSS. Что касается IE7, то он определенно устарел, но он по-прежнему приносит моей компании немалые деньги каждый год, а это значит, что наша маркетинговая команда не собирается отказываться от него в ближайшее время. В 2013 году мы действительно увидели рост продаж среди пользователей IE7 по сравнению с 2012 годом.   -  person RAF0255    schedule 09.01.2014
comment
Используйте Bootstrap 2.3.2, он работает в ie7 и не зависит от размера коробки. Он отлично работает, и вы можете сначала сделать его мобильным, возможно, кто-то уже это сделал. Кроме того, вы можете просто использовать часть сетки. Однако, если сайт уже создан, может быть проще просто использовать то, что у вас есть, чтобы сделать его адаптивным.   -  person Christina    schedule 09.01.2014

Ответы (2)


arrow_upward
0
arrow_downward

В Twitter Bootstrap 3 вы можете удалить box-sizing в строке 293.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Просто удалите это и в объявлении ввода :)

person edonbajrami    schedule 09.01.2014
comment
Как это позволяет работать с размером сетки? Как я могу получить, скажем, 10-пиксельные желоба равномерно, используя проценты для определения ширины сетки без этой блочной модели? - person RAF0255; 09.01.2014
comment
Без этого сетка абсолютно не будет работать, возникнет серьезная проблема с математикой. - person Christina; 09.01.2014

arrow_upward
0
arrow_downward

Вот пример сетки Bootstrap 2.3.x, использующей ее только для мобильных устройств, она начинается с ширины 768 минут, вы можете изменить это значение. Чтобы это увидели IE7 и IE8, используйте Respond.js и убедитесь, что вы прочитали их документы. В основном вам нужно локально связать (относительный путь) с CSS для Respond.js.

Это не зависит от box-sizing:border-box.

@media (min-width: 768px) {

    [class*="span"] {
        float: left;
        min-height: 1px;
        margin-left: 20px;
    }
    .row {
        width: 100%;
        *zoom: 1;
    }
    .row:before,
    .row:after {
        display: table;
        content: "";
        line-height: 0;
    }
    .row:after { clear: both }
    .row [class*="span"] {
        display: block;
        width: 100%;
        min-height: 30px;
        float: left;
        margin-left: 2.7624309392265194%;
        *margin-left: 2.709239449864817%;
    }
    .row [class*="span"]:first-child { margin-left: 0 }
    [class*="span"].pull-right,
    .row [class*="span"].pull-right { float: right }
    .row .span12 { width: 100% }
    .row .span11 { width: 91.43646408839778% }
    .row .span10 { width: 82.87292817679558% }
    .row .span9 { width: 74.30939226519337% }
    .row .span8 { width: 65.74585635359117% }
    .row .span7 { width: 57.18232044198895% }
    .row .span6 { width: 48.61878453038674% }
    .row .span5 { width: 40.05524861878453% }
    .row .span4 { width: 31.491712707182323% }
    .row .span3 { width: 22.92817679558011% }
    .row .span2 { width: 14.3646408839779% }
    .row .span1 { width: 5.801104972375691% }
    .row .offset12 { margin-left: 105.52486187845304% }
    .row .offset12:first-child { margin-left: 102.76243093922652% }
    .row .offset11 { margin-left: 96.96132596685082% }
    .row .offset11:first-child { margin-left: 94.1988950276243% }
    .row .offset10 { margin-left: 88.39779005524862% }
    .row .offset10:first-child { margin-left: 85.6353591160221% }
    .row .offset9 { margin-left: 79.8342541436464% }
    .row .offset9:first-child { margin-left: 77.07182320441989% }
    .row .offset8 { margin-left: 71.2707182320442% }
    .row .offset8:first-child { margin-left: 68.50828729281768% }
    .row .offset7 { margin-left: 62.70718232044199% }
    .row .offset7:first-child { margin-left: 59.94475138121547% }
    .row .offset6 { margin-left: 54.14364640883978% }
    .row .offset6:first-child { margin-left: 51.38121546961326% }
    .row .offset5 { margin-left: 45.58011049723757% }
    .row .offset5:first-child { margin-left: 42.81767955801105% }
    .row .offset4 { margin-left: 37.01657458563536% }
    .row .offset4:first-child { margin-left: 34.25414364640884% }
    .row .offset3 { margin-left: 28.45303867403315% }
    .row .offset3:first-child { margin-left: 25.69060773480663% }
    .row .offset2 { margin-left: 19.88950276243094% }
    .row .offset2:first-child { margin-left: 17.12707182320442% }
    .row .offset1 { margin-left: 11.32596685082873% }
    .row .offset1:first-child { margin-left: 8.56353591160221% }

}/* end min-width */
person Christina    schedule 09.01.2014