消除窗口大小的固定格

Question

當窗口的寬度爲< 960時，http://mondaybynoon.com/上的固定面板消失。 沒有使用JS。 有人可以解釋，它是如何實施的？

Answer 1

他對該響應網站使用media query。

可以在HTML這樣定義：

<link rel='stylesheet' media='screen and (max-width: 900px)' href='css/medium.css' /> 

OR 您可以在CSS這樣的定義：

@media screen and (max-width: 900px){ 
    body { 
    background: #ccc; 
    } 
} 

檢查這些文章以瞭解更多http://css-tricks.com/css-media-queries/， http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Answer 2

他們使用CSS來做到這一點。他們有規則說，當瀏覽器的寬度在這個特定的寬度實現這個CSS。

Answer 3

他們使用@media規則。

段從他們的CSS：

@media (max-width:950px) { 
    #sidebar { display:none; } 
    #content { margin-left:20px; } 
    ... 
} 

文檔： http://www.w3.org/TR/css3-mediaqueries/#width