Hi, I'm Tim Millwood. I am a Web Developer from Abergavenny, UK, and work for Mark Boulton Design, specializing in Drupal. This is my blog!
Media queries & Drupal
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
