CSS3 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 .
