CSS Media Queries for All Devices

By , June 14th, 2013 , Tags: , , , 7 Comments

In CSS3, web developers/designers can define a media type such as screen or print, and specify the look of the content by specifying conditions such as width, height, or orientation. A CSS media query combines a media type and a condition to specify how web content will appear on a particular receiving device.

CSS Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, CSS media queries expand the role of the media attribute that controls how your styles are applied. For example, it’s been common practice for years to use a separate style sheet for printing web pages by specifying media=”print” . CSS Media queries take this idea to the next level by allowing designers to target styles based on a number of device properties, such as screen width, orientation, and so on. Figures 1–3 demonstrate CSS media queries in action. They all show the same web page as viewed in a desktop browser, on a tablet, and on an iPod touch.

Support media queries
CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on most modern smartphones and other screen-based devices. Although older versions of IE don’t support media queries, you should start using them now. Click here to check out our article on media queries support for Internet Explorer (IE) 7 and Internet Explorer (IE) 8.

Testing media queries
Testing your code is important. Testing for tablets and smartphones complicates testing since ideally you would have an array of devices at your disposal. Luckily, you can test most queries without possessing the actual device. It’s always better to have the real thing in front of you, but for the purposes of this article, using a simple browser will help you understand how queries work.

The browser checks CSS media queries every time the window changes, when you resize it, for instance, or when you flip the phone from portrait to landscape orientation.

  • Peter

    Interesting! Thanks for sharing..

  • http://www.fricks.com.br/ Joao Paulo Fricks

    Thanks 🙂

  • Antonio Reyes Montufar

    Good Post Thanks!!

  • Vinayak Anivase

    Thanks for sharing!

  • http://www.abinashmohanty.com/ Abinash Mohanty

    This is amazing! Thanks

  • Kenth Hagström

    I think @media print {} should be added for it to be truly all devices. A part from that it is an impressive list of CSS media query rules and resolution boundaries.

  • Jessie Genn Cortez Mabalhin

    This is very useful! Thank you heaps! 🙂

I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.