How to make a Responsive design

This is another post to make me remember how is the sentency to apply different styles depending on the screen size.

Now a days, people want to have responsive website instead of to have a website for mobiles, another one for tablets and another one for desktops.

So if you want to make only one URL for all of these devices you have to make a responsive design. This is quite easy. You have to modify your .CSS file writing all the generic styles at the begining. At the end of the file write the particular styles for every resolution inside these commands:

 

	@media only screen and (max-width: 480px) {
	    p { color:#000; }
	}

	@media only screen and (min-width: 481px) and (max-width: 768px) {
	    p { color:#0ff; }
	}

	@media only screen and (min-width: 769px) and (max-width: 960px) {
	    p { color:#00f; }
	}

	@media only screen and (min-width: 961px) and (max-width: 1040px) {
	    p { color:#0f0; }
	}

	@media only screen and (min-width: 1041px) {
	    p { color:#f00; }
	}

	

 

As you can imagine, you can change the conditions of the rules and set the width and height you need. So when the screen size make true the condition, those styles are used and not others. Of course, all the styles you have outside of these @media rules are used too.

Find more information about @media rule: http://www.w3schools.com/css/css_mediatypes.asp

Thu, Jun 6th 2013, 13:50 | CSS

0 Comments

Add New Comment

Your name:
Your e-mail:
Your web page:
Comment:
I would like to receive new comment notification.
Security code: