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

Я попытался найти ответ на этот вопрос как в Google, так и на этом веб-сайте.Отзывчивая сетка CSS, которая не зависит от размера окна

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

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

Если вы думаете об этом на практике, мне кажется, что для правильного использования процентных ставок потребуется коробка с размером рамки.

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

Спасибо.

источник

2014-01-09 RAF0255

, как вы можете пойти вносит специальный файл CSS для IE7 также время, чтобы понять, что IE7 довольно устаревшие и неиспользуемые http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201212- 201312-бар " – DaniP

Я начинаю все больше думать, что IE7 будет нуждаться в собственном файле CSS. Насколько IE7 устарел, это определенно есть, но он по-прежнему делает мою компанию довольно много денег каждый год, что означает, что наша маркетинговая команда не собирается отпускать ее в ближайшее время. Мы действительно видели рост продаж пользователей IE7 в 2013 году в 2012 году. – RAF0255

Используйте Bootstrap 2.3.2, он работает в ie7, и он не полагается на ящик Это отлично работает, и вы можете сделать его мобильным сначала, возможно, кто-то, кто сделал это уже , Кроме того, вы можете просто использовать его. Однако, если сайт уже создан, было бы проще просто использовать то, что вам нужно, чтобы он реагировал. – Christina

В Twitter Bootstrap 3 вы можете удалить коробчатого проклейки в строке 293.

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

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

источник

2014-01-09 14:30:18 edonbajrami

Как это разрешает работу сетки? Как я могу получить, скажем, 10px желобов, равномерно, используя проценты для определения ширины сетки без этой модели окна? – RAF0255

Сетка не будет работать без этого, будет серьезная математическая проблема. – Christina

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

Это не зависит от размера коробки: 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 */

источник

2014-01-09 16:53:26 Christina

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

ответ

Смежные вопросы