JSFiddle - React, Tailwind, and code Playground
by mickael l
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aaa</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="aaa" />
<meta name="keywords" content="aaa" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<link type="text/css" rel="stylesheet" href="css/index.css" />
<link rel="shortcut icon" href="http://www.aa/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://www.aa.com/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.aa.com/favicon.png" />
</head>
<body>
<h1>Dꮯ Media Queries</h1>
<div id="container">
<div id="menu">
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
<li><a href="#">Lien 5</a></li>
</ul>
</div>
<div id="main">
<h2>Zone principale</h2>
<p>...</p>
</div>
<div id="aside">
<h2>Zone annexe</h2>
<p>...</p>
</div>
<div id="actu1">
<h2>actu1</h2>
<p>...</p>
</div>
<div id="actu2">
<h2>actu2</h2>
<p>...</p>
</div>
<div id="actu3">
<h2>actu3</h2>
<p>...</p>
</div>
<div id="actu4">
<h2>actu4</h2>
<p>...</p>
</div>
</div>
<p class="mention">Page de dꮯnstration <a href="http://www.alsacreations.com">Alsacreations</a> (<a href
="/article/lire/930-css3-media-queries.html">retour 'article</a>)</p>
</body>
</html>CSS
body {
font-family:Sans-serif;
font-size:100%;
background:#ccc;
}
a {
color:#369;
}
p.mention {
margin: 1em;
color:#666;
clear:both;
padding-top:2em;
}
h1 {
padding:0;
color:#fff;
text-shadow:1px 1px 1px #aaa;
margin-bottom:0;
margin:1em;
}
h2 {
background:#B2D33A;
font-size : 18px;
color:#fff;
margin:0;
padding:4px;
}
#menu ul, #menu li {
list-style-type:none;
margin:0;
padding:0;
}
#menu li {
float:left;
width:20%;
text-align:center;
}
#menu a {
display:block;
background:#444;
color:#fff;
border-bottom:1px;
text-decoration:none;
line-height:300%;
padding:0 2em;
}
#menu a:hover {
background:#222;
}
/* Disposition par défaut */
#container {
margin : 0 auto;
}
#main{
display: inline-block;
background:#fff;
min-height:300px;
overflow:auto;
width:100%;
clear:both;
}
#actu1,#actu2,#actu3,#actu4 {
display: inline-block;
background:#fff;
min-height:80px;
overflow:auto;
width:80%;
clear:both;
}
#aside {
background:#eee;
}
#actu1{
background:#eee;
}
#actu2{
background:#eee;
}
#actu3{
background:#eee;
}
#actu4{
background:#eee;
}
#menu {
width:100%;/*largeur bouton*/
overflow:auto;
}
/* min-width pour moyennes résolutions */
@media screen and (min-width: 1024px) {
#main {
width:74%;
clear:none;
}
#aside {
width:25%;
float:right;
clear:none;
min-height:500px;
}
#actu1{
width:18.3%;
clear:none;
min-height:150px;
}
#actu2{
width:18.3%;
clear:none;
min-height:150px;
}
#actu3{
width:18.3%;
clear:none;
min-height:150px;
}
#actu4{
width:18.4%;
clear:none;
min-height:150px;
}
}
/* max-width pour faibles résolutions */
@media screen and (max-width: 640px) {
#menu a {
display:block;
}
#menu li {
float:none;
width:100%;
}
#main, #aside, #menu, #actu1, #actu2, #actu3, #actu4 {
clear:both;
width:100%;
}
}