What’s Your Media Query Stack Look Like?

So, what does your media query stack look like?

  • How do you set up your media queries?
  • Separate style sheets?
  • At the bottom or your display style?
  • What queries do you use to target each device and what devices are you targeting?

I’ve been experimenting with media queries a lot more these days. I’ve been simply just hand coding them in, generally at the bottom of my display style sheet. Also I’ve really liked using Andy Clarke’s 320 and Up boilerplate. But I’m asking you what do you prefer to use? Any other cool boiler plates, templates or even just simple media query stacks that you have used with a great deal of success?

About the author

Patrick Cox wrote 98 articles on this blog.

Patrick is a UX Designer and the co-creator of Payba.cc and Aplethora (a two man interwebs design firm). He also enjoys family, snowboarding, sports and sugar free water mix ins and.... this is his blog.

One comment

  1. Blake

    Hey Patrick,

    When I went to bdconf.com a couple months ago a few people made points about letting your content determine your breakpoints. It was weird to think about since at that point I hadn’t done a responsive site… but it makes sense and that’s what I try to do now. The principle is being ‘device agnostic.’ Even tho most the time I still have a breakpoint set a 320px for iPhone portrait :)

    I remember one quote was something like resize the browser until it looks like crap then set a breakpoint.

    Here’s Luke W.’s notes from Ethan Marcotte’s talk http://www.lukew.com/ff/entry.asp?1494
    “Design grids from the smallest element up. This allows you to move away from breakpoints connected to devices and instead focus on breakpoints connected to your content.”