25 Great Examples of Media Queries

In today’s web, the constant new developments crowd our twitter streams. The latest HTML5 framework, CSS3 effects and multi-device responsive layouts.

With the popularity of tablets, mobile devices and the basic need to have access to everything on all devices.

Media queries offer designers the ability to easily code their websites so that they are optimized on all devices and screen sizes. With large monitors displaying at it’s best, with smaller devices like an iPad – the information needs to be laid out differently, so it’s still user-friendly. Further to that a mobile device like an iPhone, to have a 1280 pixel wide website fit onto a screen sized at 320 pixels the needs to be optimized for users to navigate easily. Most sites stack their information for vertical scrolling, which allows items to be sized larger.

Trent Walton

Team Paws

Think Vitamin

Forefathers Group

Arrrr Camp



Cacao Tour



Simon Collison




Robot or Not

New Adventures


Luca Vercellio


Kultur Banause Blog

Web Agency Bologna

A List Apart


More Hazards

Berkshire Salon and Day Spas


Ed Merritt

Diablo Media

Spark Box

  • Hi Chad,

    you can add one to your list since last Wednesday:
    http://www.gonzoblog.nl – new responsive design. Another site that is beautiful is of course 8faces.com!

    I’ve seen most of the above sites, pure as inspiration because they really are beautiful, .. therefore good pick! Thanks for sharing, Cheers & Ciao ..

  • Really cool collection ! Many thanks !

  • Thanks a lot for the mention! Cheers 🙂

  • I have tested all these sites on two tablets and they work just fine.

  • Really cool collection ! Many thanks !

  • thanks for the cool collection. It’s time to learn html5

  • Your article is so cool, especially for the pics, i like ur pics 🙂