Categories: CSS3 // HTML5 // XHTML / CSS

Responsive Web Design and CSS3 Media Queries

You have probably already heard of responsive web design (RWD) by now. It is basically a fancy term on how to make your website adjust to different devices like tablets and mobiles. And for that you need CSS media queries.

Let’s get down and dirty right away.

On the screenshot below you can see an example of a page not using CSS3 media queries and the same page that is using media queries.

Without and With CSS3 Media Queries
Left screenshot shows example page on mobile without using media queries and right side uses them. See the difference?

I’m going to use this example page to quickly explain the media queries hence the basic design and layout.

You can also download the full source code of the example page.

[view_demo url=”http://www.lessthanweb.com/demo/responsive-design-css3-media-queries/index.html” track_demo_category=”Demo” track_demo_action=”Responsive Web Design and CSS3 Media Queries” source_url=”http://www.lessthanweb.com/demo/responsive-design-css3-media-queries/responsive-design-css3-media-queries.zip” track_source_category=”Downloads” track_source_action=”Responsive Web Design and CSS3 Media Queries”]

Viewport Meta Tag

The first step in making your website to adjust to different devices is to set the meta tag called viewport.

Here is what you should add to the head of the HTML document:

<meta name="viewport" content="width=device-width">

The width property sets the size of the device’s viewport.

There are a few ways of setting the width property. For example, if you have a website that is designed for mobiles only and the site’s width is 320 pixels, you can set the width property to width=320. But the best way to do this is to let the device set the width of the viewport by setting the width property to device-width.

What is the viewport? Basically it’s the screen of the device where all the magic happens. :)

Once you set this meta tag, the next step is to set some CSS media queries.

Media Queries

CSS Media queries allow you to target CSS rules based on screen size, device orientation and so on.. You insert them into your .css file and it looks like this:

@media screen and (max-width: 980px) {
    /* CSS rules inside this block will be used when the size of the viewport is 980 pixels or less */
}
@media screen and (max-width: 830px) {
    /* CSS rules inside this block will be used when the size of the viewport is 830 pixels or less */
}

How to know where to set breakpoints? Well, the most simple way is to load the page in your browser and resize it. When you see that the elements of the page are not as you want them, set media queries.

Looking at the example page you can see that I have set 3 media queries.

The example page has a fixed layout, width set to 980 pixels. That means that the elements need to be fluid when the width of the viewport is 980 pixels or less.

/*
	For 980px or less
*/
@media screen and (max-width: 980px) {
	#wrapper {
		width: auto;
		padding: 0 2px;
	}
	#content_container #content {
		width: 72%;
	}
	#content_container #sidebar {
		width: 25%;
	}
}

That’s it, if you now resize the browser below 980 pixels, you will see that the elements of the page become fluid.

The next breakpoint is set at 830 pixels of width. Why? Because I want to move the header menu below the title and also make the images fluid instead of fixed size.

/*
	For 830px or less
*/
@media screen and (max-width: 830px) {
	#header {
		height: 100%;
	}
	#header #logo,
	#header #menu {
		float: none;
	}
	#header #logo {
		margin-top: 15px;
	}
	#header #menu {
		margin: 15px 0 0 10px;
	}
	#header #menu ul li {
		margin-bottom: 10px;
	}
	#content_container #content img {
		width: 25%;
	}
	#content_container #content img.full_width {
		width: 100%;
	}
}

Since I want to move the menu under title, I need to set the float property to none for the header elements (title and menu).

In this stage, I also set the width property to % instead of pixels so that the images become fluid and resize nicely.

Next and last breakpoint is set at 600 pixels of width.

/*
	For 600px or less
*/
@media screen and (max-width: 600px) {
	#content_container #content {
		width: 100%;
	}
	#content_container #sidebar {
		display: none;
	}
}

In this media query I resize the content area to full width (100%) and hide the sidebar. You could of course move the sidebar below the content but I choose to hide it in this example.

Here are the results in portrait and landscape orientation on mobile.

Phone Portrait Media Queries Example
Showing the example page in mobile in portrait orientation
Phone Landscape Media Queries Example
Showing the example page in mobile in landscape orientation

And that’s it really. Have fun. ;)

0 Comments

Leave a Reply

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