Media queries & Drupal

Submitted by timmillwood on Thu, 07/22/2010 - 12:03
Drupal
Drupal 6
Drupal 6 Themes
Theming
css
media queries
design

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 http://practical-ia.com/ with Drupal. Give it a try, resize your browser.

Responsive Web Design by Ethan Marcotte (http://www.alistapart.com/articles/responsive-web-design/) is a great article for more information on media queries.

More info about adding style sheets to your Drupal theme. http://drupal.org/node/171209