matthua/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Responsive interactie ontwerp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container"><!--deze div roept de achtergrond aan, om de achtergrond aan te passen verander je de links in de css-->
<img name="spacer" src="images/spacer.png" border="0" id="spacer" alt="" /><!--De spacer zorgt er voor dat de div schermvullend is -->
</div><!--einde container-->
</body>

</html>

## style.css
@charset "UTF-8";

img{
        max-width: 100%;
	height: auto;
	}

body{
	margin: 0px;
	padding: 0px;
	}

/*Desktop*/
#container{
	background-image: url(images/home_1024.png); /*pas afbeelding aan obv het ontwerp*/
	background-size: 100%;
	width: 100%;
	max-width: 1024px;
	min-height: 1800px; /*pas aan obv het ontwerp*/
	background-repeat: no-repeat;
	margin: auto; /*voor het uitlijnen van het ontwerp*/
 	}

/*iPad portrait*/
@media screen and (max-width: 768px) and (orientation: landscape){
	#container{
	background-image: url(images/home_1024.png);/*pas afbeelding aan obv het ontwerp*/
	max-width: 768px;
	}
}

/*iPad*/
@media screen and (max-width: 768px) {
	#container{
	background-image: url(images/home_768.png);/*pas afbeelding aan obv het ontwerp*/
	max-width: 768px;
	}
}

/*iPhone en voor Chrome in klein formaat*/
@media screen and (max-width: 480px) {
	#container{
	background-image: url(images/home_320.png);	/*pas afbeelding aan obv het ontwerp*/
	max-width: 320px;
	}
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	<title>Responsive interactie ontwerp</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width"/>
	<link href="style.css" rel="stylesheet" type="text/css" />

	</head>

	<body>
	<div id="container"><!--deze div roept de achtergrond aan, om de achtergrond aan te passen verander je de links in de css-->
	<img name="spacer" src="images/spacer.png" border="0" id="spacer" alt="" /><!--De spacer zorgt er voor dat de div schermvullend is -->
	</div><!--einde container-->
	</body>

	</html>
	@charset "UTF-8";

	img{
	max-width: 100%;
	height: auto;
	}

	body{
	margin: 0px;
	padding: 0px;
	}

	/Desktop/
	#container{
	background-image: url(images/home_1024.png); /pas afbeelding aan obv het ontwerp/
	background-size: 100%;
	width: 100%;
	max-width: 1024px;
	min-height: 1800px; /pas aan obv het ontwerp/
	background-repeat: no-repeat;
	margin: auto; /voor het uitlijnen van het ontwerp/
	}

	/iPad portrait/
	@media screen and (max-width: 768px) and (orientation: landscape){
	#container{
	background-image: url(images/home_1024.png);/pas afbeelding aan obv het ontwerp/
	max-width: 768px;
	}
	}

	/iPad/
	@media screen and (max-width: 768px) {
	#container{
	background-image: url(images/home_768.png);/pas afbeelding aan obv het ontwerp/
	max-width: 768px;
	}
	}

	/iPhone en voor Chrome in klein formaat/
	@media screen and (max-width: 480px) {
	#container{
	background-image: url(images/home_320.png); /pas afbeelding aan obv het ontwerp/
	max-width: 320px;
	}
	}