在窗口調整大小上消失固定的div

Question

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

Answer 1

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

您可以像這樣在HTML定義：

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

或者您可以在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

他們使用@media規則。

他們的CSS片段：

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

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

Answer 3

他們使用CSS執行此操作。 他們有規則說，當瀏覽器的寬度達到此特定寬度時，將執行此CSS。