The Series
Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:320px,480px, 600px,768px,900px,1200px @media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on... } In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you're not an immortal being with unlimited time, that effort should be spent carefully. Read more: Beginner's Guide to Responsive Web Design - Treehouse Blog http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design#ixzz2AvqoavGR Read more:
Resources
Responsive web design is about a year old now, and there are plenty of resources that can help you learn more about it. On our high-quality video training service Treehouse, we have many videos that go in depth on the topic. Here are some links: Responsive Web Design Video Course on Treehouse Video: Introduction to Responsive Web Design Ethan Marcotte's article on Responsive Web Design The W3C specification for CSS3 Media Queries great roundup of responsive design techniques via Smashing Magazine Hopefully this article helped, but if you're still feeling confused about responsive design, don't be afraid to leave a question or comment. If you're already utilizing responsive web design in your site or web application, share the link here so we can see!