Courses/Jouw Site op Kleine Schermpjes

Responsive Webdesign

Steps for graceful degradation:

1 Set the initial scale:

  <meta name="viewport" content="width=device-width; initial-scale=1.0">

2 Use CSS media queries to hide unnecessary content

There's less space on smaller screens, so you'll want to hide things like footers and decorative elements.

  @media screen and (max-width: 560px) {
	#footer {
		display:none;
	}
}

3 Use CSS media queries to arrange your content into relatively positioned blocks

On bigger screens, you can easily have multiple blocks of content next to each other. If the screen is smaller however, this gets more difficult. On medium sized screens this can be solved by making the blocks narrower. But if the screen is really small, you'll have to stack all blocks vertically:

  
@media screen and (max-width: 400px) {
	#block {
		width:100%;
		float:none;
	}
}