This article is pretty old now and may or may not be accurate, please get in contact if you are looking for some help with your Drupal media queries
Media queries are getting more and more popular in web design to allow your web site to change depending on the screen resolution, or screen orientation.
It is very simple to add media queries to your Drupal theme.
To define a CSS file in your Drupal theme's info file you would usually write declarations such as:
stylesheets[all][] = style.css
or
stylesheets[screen][] = style.css
etc
To use media queries you can write declarations such as
stylesheets[screen and (max-width: 600px)][] = screen-600.css
or
stylesheets[screen and (orientation:landscape)][] = screen-landscape.css
You can also define media queries within your CSS file.
@media screen and (max-device-width: 600px) {
}
At Mark Boulton Design we are using media queries within the CSS file on practical-ia.com with Drupal. Give it a try, resize your browser.
Responsive Web Design by Ethan Marcotte is a great article for more information on media queries.
More info about adding style sheets to your Drupal theme.
Looking for some further help with Media Queries, responsive web design or your Drupal theme? Get in touch