IE9 and CSS3 Media Queries

IE9 supports "CSS3 Media Queries," that "enable you to style pages based on different display surface factors such as width, height, orientation, resolution, etc. Developers can use these factors to customize their sites for viewing on different devices such as a small-screen netbook or a widescreen monitor," informs Microsoft."Media Queries expands the notion of optimizing […]

IE9 supports "CSS3 Media Queries," that "enable you to style pages based on different display surface factors such as width, height, orientation, resolution, etc. Developers can use these factors to customize their sites for viewing on different devices such as a small-screen netbook or a widescreen monitor," informs Microsoft.

"Media Queries expands the notion of optimizing for a particular media type by making it possible to optimize for particular properties of the media. "Screen" is a useful media type, but there're many types of screens--from mobile phones with tiny screens to laptops with averages screens to desktop machines connected to widescreen monitors as large as 30"; newer screens may be higher resolution than screens of the recent past. As a Web developer, you may want to reflow your Web page for each of these devices in order to give site vistors the best experience on their device. Media Queries enable you to target your CSS as generally or as specifically as you like."

Basic Example: To write a media query which targets screens which're 1250px wide you could write following (note: "screen" width and height actually refer to the width and height of the browser window, not the physical display):

@media screen and (width:1250px) { ... }

On the IE Test Drive site you can find a CSS3 Media Queries demo which illustrates the use of a few different media queries to alter the page layout based on your screen (browser) width.

[tags]css3 media queries,ie9,intetnet explorer 9[/tags]

[Source]