Do I have to write media queries for every screen size my site could be viewed in, or is there an alternative?

Question

I am a junior front-end developer and have just started looking into responsive design. While the thought of media queries excited me, what happens when you don’t have enough breakpoints?

For the most part you can assume someone has an iPhone or iPad, but what about other tablets and mobile phones and different Mac/PC screen sizes? It will be a crazy task to write media queries for each screen size.

So, is there another way to accomplish responsive design without media queries? Or have I misunderstood how media queries can be used?

Answer 1

I’m not sure what sort of alternative you’re looking for. “Responsive design” means “design that responds to its environment”. To do that, you need something that lets you say “if the environment is X, do Y”. That’s what media queries do.

It will be a crazy task to write media queries for each screen size

It would be! That’s not the idea. The web doesn’t work like that. HTML and its layout system are designed, as far as possible, to be viewable on pretty much any device, running all sorts of different software (web browser, screen reader, braille display, search engine crawler, etc.).

For example: by default, block level elements take up as much horizontal space as is available. You don't need to write a media query for every possible screen size to get them to do that, they just do it.

Breakpoints for your layout should be based more on the content being laid out than on the sizes of different devices. There’s several good articles outlining the approach:

• http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
• http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
• http://www.markboulton.co.uk/journal/theinbetween

If you’re writing new styles for each slightly different screen size, you’re probably doing it wrong.

You could look at the screen sizes of popular devices to inform your design decisions, but Wikipedia already lists those, and will continue to do so into the future as new devices come out.

It’s not easy to make a design that works in lots of different viewports, but that’s not because of how media queries work. It’s an inherently difficult task.