我響應佈局沒有響應

我試圖實現基於exmaples和代碼在這裏一個負責任的佈局：www.responsivegridsystem.com 我響應佈局沒有響應

我已經把它包了幾個集裝箱的，因爲我需要在1000px容器中心的960px內容區域。

我的意圖是寬度小於960px，兩個容器都變爲100％寬度。佈局正是我想要的全尺寸，但它不會像我想要的那樣在小於960像素時移動。

當前CSS（基於建議進行一些編輯，仍然沒有工作。）：

.masterContainer { 
    position:relative; 
    margin:0 auto; 
    margin-top:-10px; 
    background-color:#FFF; 
    width:1000px; 
    overflow: hidden; 
} 
.pageContainer { 
    position:relative; 
    display:table; 
    margin:0 auto; 
    width:960px; 
    overflow:hidden; 
} 
/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
} 
.col:first-child { margin-left: 0; } 


/* GROUPING */ 
.group:before, 
.group:after { 
    content:""; 
    display:table; 
} 
.group:after { 
    clear:both; 
} 
.group { 
    zoom:1; /* For IE 6/7 */ 
} 

/* GRID OF THREE */ 
.span_3_of_3 { 
    width: 100%; 
} 
.span_2_of_3 { 
    width: 70%; 
} 
.span_1_of_3 { 
    width: 30%; 
} 

@media only screen and (min-width: 481px and max-width: 960px) { 
    .masterContainer { 
     width:100%; 
    } 
    .pageContainer { 
     width:100%; 
    } 
} 

@media only screen and (max-width: 480px) { 
    .span_3_of_3 { 
     width: 100%; 
    } 
    .span_2_of_3 { 
     width: 100%; 
    } 
    .span_1_of_3 { 
     width: 100%; 
    } 
}

HTML

<div class="masterContainer"> 
    <div class="pageContainer"> 
     <div class="section"> 
      <div class="col span_3_of_3" id="header">Header 
      </div> 
      <div class="col span_3_of_3" id="slideshowContainer">Slideshow 
      </div> 
     </div> 
     <div class="section group"> 
      <div class="col span_2_of_3" id="contentArea"> 
      This is column 1 
      </div> 
      <div class="col span_1_of_3" id="rightColumn"> 
      This is column 2 
      </div> 
     </div> 
     <div class="col span_3_of_3" id="footer">Footer 
     </div> 
     <div class="col span_3_of_3" id="bottom"> 
     </div> 
    </div> 
</div>

是有毛病我@media代碼還是我打破它在別處？

來源

2014-03-28 Anonymous Man

我在您的css中沒有看到任何@media查詢？ –

你的媒體查詢告訴標識做一些事情，而你的HTML有他們的班。改變它是這樣的：

@media only screen and (max-width:960px){ 
    .masterContainer {width: 100%;} 
    .pageContainer {width: 100%;} 
}

這是你的代碼和查詢的小提琴。我給了他們背景顏色的例子。

JS Fiddle with your code

來源

2014-03-28 14:02:52

添加媒體查詢時，我只是在粘貼到問題時錯過了它們。 –

您的媒體查詢目前正在告訴ID做些事情，但您的容器是您的HTML中的類。 –

Gah！你是完全正確的，我發誓我認爲那些是身份證。但是，我改變了上面的媒體查詢，但它仍然沒有迴應。 –

從您發佈的內容來看，沒有@media代碼...如果您希望頁面能夠響應，您無法設置特定的寬度設置。 masterContainer width 1000px ..你需要重做，例如：

@media (min-width: 700px), handheld and (orientation: landscape) 
{ 
    .masterContainer{ 
    width:60%; // or whatever you may need 
    } 
}

看看一些例子。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

來源

2014-03-28 14:00:42 JayD

添加了上面的媒體語句，那只是一個張貼意外 –

你需要通過@media查詢中使用它：

@media screen and (max-width: 959px) { 
    .masterContainer, 
    .pageContainer { 
     width: 100%; 
    } 
}

來源

2014-03-28 14:00:48 KittMedia

添加了媒體查詢，當我粘貼到問題中時，我只是錯過了它們。請注意，容器是通過id調用的，而不是class，因此'＃'而不是'。'。我只有在我的，如果不在那裏？ –

在你的HTML中有類，甚至在你的CSS的第一行。你必須決定什麼是正確的。 – KittMedia

你不必媒體查詢在你的CSS。

爲不同的屏幕尺寸創建單獨的文件，並在其中放置樣式。這是最簡單的方法。

並閱讀本文。它將幫助您瞭解媒體查詢如何工作。

csstricks media queries

來源

2014-03-28 14:03:28

我確實有媒體查詢，我沒有將它們粘貼到原始問題中。我現在編輯它。 –

看看這個小提琴：http://jsfiddle.net/K6s6z/2/我添加了邊框僅用於調試目的 –

它不工作的原因是這樣的： @media only screen and (min-width: 481px and max-width: 960px)這是一個錯誤的查詢。

它應該是： @media screen and (min-width:481px) and (max-width:960px)

不能結合min和max喜歡你了吧。

來源

2014-03-28 14:56:07 disinfor

我響應佈局沒有響應

回答

相關問題