Handpicked free fonts for graphic designers with commercial-use licenses. CSS3 Click Chart (CSS3 Support Chart) by Impressive Webs. Media Queries. Lost World's Fairs. CSS3 Media Queries. What's different about this demo for IE10? Originally, this demo's HTML contained <img> elements for both the large and small resolution images. CSS3 Media Queries were used to hide and show these images based on the media's dimensions. However, this means that both the large and small resolution versions of each image were downloaded by the browser.
With Media Query Listeners, the demo's script can determine the current evaluation of a media query and just download the necessary resolution image. For mobile devices, this could mean you save money on that expensive data plan by not having to download the large image files! CSS3 Media Queries enable web authors to selectively style their page based on properties of the media where the page is being displayed.
Here is the syntax to use a media query: In this declaration, screen is the media type and max-width is the media property. This page uses media queries to change the layout of the page based on the width.