Web site layout that changes with different widths?

Question

Does anyone know how to accomplish a different layout based on the browser width, like these two sites?

http://sasquatchfestival.com/

http://css-tricks.com/

I've tried to Google it, look through Stackoverflow questions, and look at their code but I think I am missing something. It actually rearranges and resizes some elements based on the width of the window, but how? Javascript?

Sorry if my search skills are just failing, but I'm not really sure what to look up, the "similar questions" here don't seem related, and even CSS-Tricks doesn't have the info in an easy to find place.

Answer 1

You don't need to use JS to detect browser width. You can simply use CSS media queries to alter the layout.

For example:

@media screen and (max-width: 1280px) {
    ... selector(s) here ...
}

Will apply CSS only to screens that are at most 1280px wide.

See also:

• http://www.w3.org/TR/css3-mediaqueries/
• http://reference.sitepoint.com/css/mediaqueries

Answer 2

You can use CSS3 media queries to deliver different styles based on the screen width. See here for more info: http://www.css3.info/preview/media-queries/

If you look at the CSS source of the sasquatchfestival.com site, for example, you can see what they're doing: http://sasquatchfestival.com/css/screen.css?v=1328828795. Search for "@media only screen" and you'll see they're delivering different CSS for widths below 768px, between 768-1024px, and above 1024px.