Confirmed users, Bureaucrats and Sysops emeriti
1,057
edits
No edit summary |
No edit summary |
||
| Line 47: | Line 47: | ||
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. | 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. | ||
Media queries are currently supported by Firefox 3.5, Safari | Another great use for this is to adjust the number of columns your content is displayed in based on the width of the display area. | ||
Media queries are currently supported by Firefox 3.5, Safari 3, and Opera 7, although the specific media features supported varies from browser to browser (as well as by version of the 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. | 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. | ||