Responsive Layout with CSS3 Media Queries

7 Flares Filament.io Made with Flare More Info'> 7 Flares ×

responsive-media-queries

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries and you can build responsive layout for mobile, iphone, ipad, any kind of device. It will react as per device width. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

CSS3 Media Queries (demo)

Check demo and resize your browser window to see it in action.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.


Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

For iPhone 4

The following stylesheet is specifically for iPhone 4


For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).


Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

Sample Site

You need to view the following site with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.

Colly

The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

  • Large size: navigation at the top, 1 row of pictures
  • Medium size: navigation on the left side, 3 columns of pictures
  • Small size: navigation at the top, no background image on logo, 3 columns of pictures

Ramesh Vadgama(RV) is a web developer who has a love for creativity and enjoys experimenting with various techniques in both developing and maintaining. Check out RV's web development tutorials and articles at raisereview.com.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Read previous post:
Retrieve images from database with JAVA

In this article, I am going to describe how to retrieve images from an Oracle database using an java. Let's...

Upload images into database with JAVA

In this article, I am going to describe how to upload images to an Oracle database using an java. below...

Close