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

Question

The fixed panel on http://mondaybynoon.com/ disappears, when the window has a width<960. No JS is used for that. Can someone explain, how it is implemented?

Answer 1

He is use media query for that responsive website.

You can define in HTML like this:

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

OR You can define in CSS like this:

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

check these articles for more http://css-tricks.com/css-media-queries/ , http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Answer 2

They use the @media rule.

Snippet from their CSS:

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

Documentation: http://www.w3.org/TR/css3-mediaqueries/#width

Answer 3

They use css to do this. They have rules that say when the browsers width is at this certain width implement this css.