Erstellt von Stefan Borchert - 1. August 2010 - 9:32
With CSS3 the W3C has introduced a new goodie for design on the web: Media Queries.
Until then stylesheets could only be called conditionally by using media types like "print" or "screen". Media Queries extends this to being able to use certain properties as a controlling mechanism if to load a style or not.
You could specify that a stylesheet is only loaded if the browser window has a maximum width of 800px.
To do so, you simply extend the value of the media-attribute by the desired attribute and value when inserting the stylesheet. To get our example to work we need to use the following HTML-Code:
<link type="text/css" rel="stylesheet" media="screen and (max-width: 800px)" href="mystyle.css" />
As an alternative you could also write it into the stylesheet directly:
@media screen and (max-width: 800px) {
...
}
If you're working with Drupal (which you should), you can use the regular .info file of the theme you're using:
stylesheets[screen and (max-width: 800px)][] = style.css