Web Technologies

Are you using CSS3 Media Queries?

CSS3 Media Queries with Marek MularczykCSS3 Media Queries are here.

Yes, I know. Internet Explorer 8 and earlier doesn’t support them. But, all the other web browsers support them already.

I’m not going to delve deep into Media Queries, I’m going to give you a quick example instead.

What are CSS3 Media Queries,  you ask?

Media queries allow web developers to change the layout of a page based on the media that’s displaying it.

This could be for adapting it to fit a smaller screen or just stripping it down to the essentials before it heads to a printer.

So, here’s a quick example for you.

This media query will target all devices that have screen (not for print) and have their width no more than 400px:

 <link href="mobile.css" rel="stylesheet" type="text/css" media=" only screen and (max-width: 400px) ">

Instead of using max-width, you can also use device-width. Here’s a difference:

  • max-width – display width,
  • device-width – device width.

For more information, check W3C website .


Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.