Developing with CSS Media Queries

My GSoC project is to develop a better admin UI for Review Board. I wanted to share my research and development on this blog. One of the challenges of developing a layout for the web is the variety of different devices with different resolutions.

I chose to use media queries to create a fluid layout for this dashboard.
Here is a simple example of a CSS media query:

@media screen and (max-width: 480px) {
/* CSS here */
}

It can also be used to link whole stylesheets:

<link rel="stylesheet" href="style/screen.css" type="text/css" 
media="screen and (max-width: 480px)" />

Demos

Here’s a prototype version of the dashboard:

This demo is able to adjust to different resolutions, the goal of this layout is to use the empty space when available.

Here’s a screenshot of the same “Admin View” on the iPad:


As you can see all three columns fit into the viewport and the other 4 widgets drop under the layout.

Browser Support

Most modern browsers support these features. For Internet Explorer 8 and lower, there needs to be a Javascript fallback.

Links

Media Query Playground

W3C Media Query Spec

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s