A CSS3 Media Query Reporter

One of the small challenges in building a responsive layout is deciding when to have certain rules apply.
For instance, at what point will your site make the transition from a single narrow column for handheld devices to a multi-column design? Will you have one big transition (from one-column to many-column), or will you provide an intermediate step or two along the way (one-column, two-column, 8-column, and so on)? And if you want to supply intermediate steps — WHEN will they apply? At 480 pixels wide ... 768 ... 1024?
One thing that can be helpful in making these decisions is an on-screen media query reporter, which can provide visual feedback as we cross each width threshold.