Media Query Tests

I’ve been working with CSS3 Media Queries lately and wanted to whip together a page that I could use to test MQs on different devices:

Basically, the page has 5 bulleted lists, with different MQ values listed: width: 480px, device-height: 1024px, and so on. In addition, there are MQ’s in the page that use the same values: if the media query applies to the page, the bulleted item is black and bold; if the media query doesn’t apply to the page, the media query is gray and crossed out. I’ve tested widths and heights of 320, 480, 768 and 1024 pixels.

Visit the page with different devices to see how it works for you: Media Query test page.