消除窗口大小的固定格

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