HTML5/CSS: update layout according to changing page size?

问题

Can anyone point me to a good tutorial/guide on responsive webpage design?

I am pretty familiar with the basics but here's what I'm looking for in particular: I have seen responsive webpages that don't just adjust themselves "fluidly" as the browser window is resized (this kind of responsive design I am sufficiently familiar with and can set up easily). What they did instead was to maintain their original (aka biggest) layout until the browser window reached a certain smaller size and then the page snapped into a different layout, perfectly accommodating the smaller size of the browser window. This change included not only the layout but also the number of items visible and the activation of additional UI elements to make navigation in the smaller window easier.

Imagine playing cards layed out next to each other in the window. Let's assume 5 cards fit next to each other when the window is in full screen mode. Now imagine the window is decreased in size. The layout stays the same until the first and the last card are almost out of the visible area. As the window gets to that size, the page "snaps" to a different layout, now only displaying the 3 cards in the center with arrows appearing on the left and right edges to signify that there are more cards to which the user can scroll. How is this kind of responsive design done?

回答1:

The snapping into place behavior you're describing is achieved by using media queries to define different styles for different screen sizes.

For example:

@media screen and (min-width: 480px) {
    .nav {
        float: none;
    }
}

@media screen and (min-width: 620px) { 
    .nav {
        float: left;
    }
}

Here's a good place to start learning about it.

回答2:

To add to the first, absolutely correct answer, you can also check out html5 boilerplate. it has a pretty good css starter for doing responsive design. It helped me quite a bit and hey, if someone already wrote it, no point in writing it again!

I usually go to http://www.initializr.com/ and grab the responsive template from there.

来源：https://stackoverflow.com/questions/11044190/html5-css-update-layout-according-to-changing-page-size