Responsive design is about building a design that reacts to the screen size of any browser. Answer the question “What if I don’t know what size screen all users will be using?” impacts your design thinking.
@media screen and (max-width: ???px)
- general max-widths: 980px, 650px, 480px, 320px, 240
- device specific example: @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)
Use percents and ems instead of hard pixels. Start with a base size (pixel-specific), and adjust from that as ratio.
Here is a discussion of flexible media and images from Ethan Marcotte, since Jay didn’t really cover anything in depth about this.