Evangelism/Firefox3.5/35Days/Articles/Media queries: Difference between revisions

Evangelism/Firefox3.5/35Days/Articles/Media queries (view source)

Revision as of 02:25, 14 June 2009

846 bytes removed , 14 June 2009

no edit summary

Sheppy

Confirmed users, Bureaucrats and Sysops emeriti

1,057

edits

@@ Line 46: / Line 46: @@
 So as you resize the window, you'll see that not only does Firefox automatically switch between the <tt>portrait.css</tt> and <tt>landscape.css</tt> style sheets as the window's width changes, but while rendering using the <tt>landscape.css</tt> style sheet, the styles change based on exactly how wide the window is, too.
-This offers enormous control over your content's layout.
-Similarly, you can offer enhanced-quality graphics when the rendering resolution is higher:
- #myimage {
-   width: 307px;
-   height: 230px;
-   float: right;
-   background-image: url("gettysburg72dpi.jpg");
- }
- @media all and (min-resolution: 300dpi) {
-   #myimage {
-     width: 307px;
-     height: 230px;
-     float: right;
-     background-image: url("gettysburg300dpi.jpg");
-   }
- }
-Here, by default, a 72 DPI image is used as the background for elements with the ID <code>myimage</code>, but when the device resolution is at least 300 DPI, a higher-resolution image is used instead. This allows you to render using small, bandwidth-friendly images when rendering to the user's screen, while offering high-resolution graphics when the user chooses to print the content, for example.
 Media queries are currently supported by Firefox 3.5, Safari 4.0, and Opera 9.5, although the specific media features supported varies from browser to browser.
 Media queries offer a great way to improve how your content looks on a variety of devices; using appropriate queries, you can render differently based on screen size, resolution, and more, thereby optimizing your content no matter how the user is accessing it.