不依賴框大小的響應式CSS網格

我有一個網站，需要作出迴應。它相對錯綜複雜，但是對於我們目前擁有的設計來說，這絕對是可能的。

我的問題是這樣的。是否有一個響應式網格系統，或者是一個完全響應式網格系統的例子，它不依賴於框式尺寸：邊框。在看PureBootstrap之後，似乎都依靠那個屬性來使它工作。

在實踐中思考這個問題時，在我看來，需要一個盒子尺寸：邊界框模型來允許適當地使用百分比。

爲什麼我無法使用這種方法？這個項目絕對需要支持IE7。我知道有可用於強制支持的polyfill和htc文件，但是，此網站的規模和大小使這些選項難以實施。從我讀過的內容來看，這些選項應該適度使用，並且這個口徑的網站，它不能用於適度。

謝謝。

2014-01-09 RAF0255

你可以去正在一個特殊的CSS文件IE7的方式也是一次認識到IE7是非常過時的和未使用的http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201212- 201312-bar「 – DaniP

我開始越來越認爲IE7將需要它自己的CSS文件就IE7過時而言，它絕對是，但它仍然使我的公司每年相當多的錢，這意味着我們的營銷團隊不會很快放棄它，我們實際上看到2013年的IE7用戶銷售額比2012年增長了。 – RAF0255

使用Bootstrap 2.3.2它在ie7中工作，它不依賴於盒子大小適中，你可以先移動它，可能有人已經完成了它。另外，你可以使用它的網格部分。但是，如果該網站已經創建好了，那麼只需使用您必須使其響應的內容可能會更容易。 – Christina

在Twitter的引導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版本網格的例子只有首先使用它移動，它在768分鐘的寬度踢，你可以改變這個值。爲了讓IE7和IE8看到這一點，請使用Respond.js並確保您閱讀他們的文檔。基本上你需要在本地鏈接（相對路徑）到Respond.js的CSS。

這不依賴框大小：邊框。

@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網格

回答

相關問題