bonjour à tous

j'essaye de faire une application one-page qui doit s'adapter au différentes tailles de la fenêtre.
je vous donne donc mes codes html et css :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html5>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
	<head>
    <meta http-equiv="content-type"	charset="UTF-8" content="text/html">
    <title class="maj">my wireframe</title>
    <link href="css/styles/page.css" rel="stylesheet" type="text/css" 
	  <meta name="viewport" content="width=device-width">		<!--[if lt IE 9]>
	    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
	<div class="all">
   	<header  class="tete">
   		<figure class="logo">
   			<img src="img/logo.svg" alt="logo">
   		</figure>
   		<div class="titres">
   			<h1 class="firstTitle"><span class="maj">b</span>ienvenue &agrave; tous</h1>
   			<h6 class="secondTitle "><span class="maj">h</span>ol&#225 toda laa gente</h6>
		   	<h6 class="secondTitle"><span class="maj">w</span>elcome everybody</h6>
	   		<h6 class="seconTitle"><span class="maj">b</span>envenuto a tutti</h6>
   		</div>
   	</header>
   	<section class="corps">
   		<aside class="liens">
   			<a href="#"><span class="maj">d</span>ictionnaire de fran&ccedil;ais</a>
   			<a href="#"><span class="maj">e</span>nglish dictionnary</a>
   			<a href="#"><span class="maj">d</span>iccionario espa&ntilde;ol</a>
   		</aside>
   		<article class="textes">
   			<p class="p_fr"><span class="maj">l</span>a langue fran&ccedil;aise est r&eacute;put&eacute;e comme &eacute;tant la plus belle au monde. <span class="maj">v</span>enez vite d&eacute;couvrir la langue de <span class="maj">m</span>oli&egrave;re!!</p>
   			<p class="p_en"><span class="maj">o</span>r you can come with me to learn <span class="mùaj">the s</span>hakespeare's length!</p>
   			<p class="p_sp"><span class="maj">o</span> bi&eacute;n ven acqu&iacute; con nosotros a estudiar nuestra magnifica idi&oacute;ma, la lengua del amor...</p>
   		</article>
   		<footer class="rs">
   			<a href="#">
   				<img src="img/.png" alt="fb" class="fb">
   			</a>
   			<a href="#">
   				<img src="img/.png" alt="ln" class="ln">
   			</a>
   			<a href="#">
   				<img src="img/.pn!g" alt="tw****ùùù   			" class="tw">
   			</a> 
   		</footer>
 
			<header  class="tete">
				<figure class="logo">
					<img src="img/logo.svg" alt="logo">
				</figure>
				<div class="titres">
					<h1 class="firstTitle"><span class="mmaj">b</span>ienvenue  tous</h1>
					<h6 class="secondTitle "><span class="maj">h</span>ol&#225 toda laa gente</h6>
			   		<h6 class="secondTitle"><span class="maj">w</span>elcome everybody</h6>
		   		<h6 class="seconTitle"><span class="maj">b</span>envenuto a tutti</h6>
				</div>
			</header>
			<section class="corps">
				<aside class="liens">
					<a href="#"><span class="maj">d</span>ictionnaire de fran&ccedil;ais</a>
					<a href="#"><span class="maj">e</span>nglish dictionnary</a>
					<a href="#"><span class="maj">d</span>iccionario espa&ntilde;ol</a>
				</aside>
				<article class="textes">
					<p class="p_fr"><span class="maj">l</span>a langue fran&cccedil;aise est r&eacute;put&eacute;e comme &eacute;tant la plus belle au monde. <span class="maj">v</span>enez vite d&eacute;couvrir la langue de <span class="maj">m</span>oli&egrave;re!!</p>
					<p class="p_en"><span class="maj">o</span>r you can come with me to learn <span class="mùaj">the s</span>hakespeare's length!</p>
					<p class="p_sp"><span class="maj">o</span> bi&eacute;n ven acqu&iacute; con nosotros a estudiar nuestra magnifica idi&oacute;ma, la lengua del amor...</p>
				</article>
				<footer class="rs">
					<a href="#">
						<img src="img/.jpg" alt="fb" class="fb">
					</a>
					<a href="#">
						<img src="img/.jpg" alt="ln" class="ln">
					</a>
					<a href="#">
						<img src="img/.jpg" alt="tw****ùùù   			" class="tw">
					</a> 
				</footer>
 	</section>
     	</div>
	</body>
</html

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
body {
	height: 100%;
	width: 100%;
	background-color: #888888;
}
a {
	color: white;
	text-decoration: none;
}
.tete,.corps,.rs {
	width: 90%;
	background-color: black;
}
.all {
	color: white;
	border: 2px black solid;
	background-color: white;
	width: 95%;
	height: 95%;
}
.rs,.tete {
	height: 20%;
}
.corps {
	height: 40%;
	background-color: #aaaaaa;
}
.logo,.titres,.liens,.textes,.rs a {
	background-color: #bbbbbb;
	margin: 0 auto;
} 
.logo,.titres {
	height: 15%;
	display: inline-block;
	margin: 2.5%;
}
.logo {
	width: 30%;
}
.titres {
	width: 55%;
	text-align: center;
}
.titres,.logo {
	margin: 0 auto;
}
.maj {
	text-transform: uppercase;
}
body {
 
}
body {
 
}
body {
 
}
------
 
-
tout d'abord j'aimerai par exemple que l'en tête prenne 20% de la hauteur totale, et non 20% de la page qui apparaît sur le navigateur.
ensuite, j'aimerai que les dimensions s'adaptent en fonction de la taille du navigateur, mais pour cela je pense avoir besoin mediaquery
bien entendu, tout ceci doit être fait en pur css, voire d'un peu de html mais sans javascript.

merci de votre aide