由於頁面變窄，這種液柱佈局如何變爲單列？

Question

有人可以解釋http://cssgrid.net/如何達到當瀏覽器寬度低於一定數量時，佈局從3列切換到單列的效果？

我試過關閉javascript，並檢查了.row和.container的CSS，但我對CSS的知識還缺乏。有一個min-width屬性，但通過Firebug改變它似乎並沒有太大的影響。

有人能指出什麼在CSS導致變化？

Answer 1

@ben;爲此需要使用mediaqueries。它是我們根據寬度定義css的新屬性。就像這樣：

<link rel="stylesheet" href="stylesheets/apx.css" type="text/css" media="screen" title="no title" /> 
<link rel="stylesheet" href="stylesheets/new-css.css" type="text/css" media="screen and (max-width: 600px)" title="no title" /> 

在上面的例子中apx.css是默認的CSS &和new-css.css申請時，你的屏幕寬度減小到600px的。

一個最好的鏈接，你的答案http://css-tricks.com/6206-resolution-specific-stylesheets/

檢查本作更http://webdesignerwall.com/tutorials/css3-media-queries

Answer 2

這是在main CSS底部的媒體查詢：

/* Smaller screens */ 

@media only screen and (max-width: 1023px) { 
    ... 
} 

@media handheld, only screen and (max-width: 767px) { 
    ... 
} 

這些應用基於不同的規則瀏覽器的維度，並通過JS class爲舊版瀏覽器提供幫助。