responsive themes and ID

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 Queries

@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)

Relative Sizing

Use percents and ems instead of hard pixels. Start with a base size (pixel-specific), and adjust from that as ratio.