Responsive CSS (Squelette)
Par Akh le mercredi, 24 août 2016, 22:06 - Lien permanent
Rendre un site Responsive, c'est pas vraiment de la tarte 
Je vous propose de vous expliquer comment j'ai fait pour ce nouveau thème, avec un squelette de base HTML/CSS que vous pourrez reprendre à votre convenance. 
Responsive vs Adaptive
Pour commencer, un site Responsive est un site unique s'adaptant seul au périphérique de l'utilisateur. L'Adaptive c'est quand le site est conçu en fonction du périphérique, mais le Responsive fait partie de l'Adaptive. (en cherchant sur internet vous trouverez une meilleure explication, mais en gros c'est le principe) 
Technique
J'ai suivi les conseils avisés glanés par ci, par là :
- on organise le code HTML et CSS pour un affichage par défaut sur le plus petit périphérique visé
- on évite le javascript
- puis on modifie le CSS en fonction de largeurs d'écran de plus en plus grandes
- j'ai retenu comme paliers
- defaut
- > 600px
- > 900px
- > 1200px
- on évite la surcharge de la page en multipliant les images (bon j'ai pas trop suivi là !)
J'ai opté pour que les articles ne s'affichent pas sur une largeur supérieure à 900px, ceci pour qu'ils restent lisibles sur des écrans de grande taille, navigateur en plein écran.
HTML
Voici le code HTML du body de base du squelette :
<body>BODY <div id="page" style="">PAGE <div id="top">TOP</div> <div id="wrapper">WRAPPER <div id="main">MAIN <div id="content">CONTENT</div> </div> <div id="sidebar">SIDEBAR <div id="blognav">NAV <div>NAV-DIV-1</div> <div>NAV-DIV-2</div> <div>NAV-DIV-3</div> </div> <div id="blogextra">EXTRA <div>EXTRA-DIV-1</div> <div>EXTRA-DIV-2</div> </div> </div> </div> <div id="footer">FOOTER</div> </div> </body>
C'est une organisation assez courante dans les thèmes dotclear, mais c'est adaptable
La base cela reste un TOP, une SIDEBAR, un CONTENT et un FOOTER.
Média Queries
Le Graal du Responsive Cela permet d'exécuter des codes CSS si une condition est respectée, en l’occurrence ici la largeur de l'écran. A ne pas confondre comme moi 
avec la largeur du périphérique. Car sinon ça marche pas !!!
...
@media only screen and (min-width : 600px){
...
@media only screen and (min-width : 900px){
...
@media only screen and (min-width : 1200px){
...
J'ai opté pour que les codes CSS s'exécutent tous, si la résolution est maximale.
Et surtout ne pas oublier dans le head de la page html, le code suivant
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Le Squelette en démo
Sans plus attendre, en cliquant ici vous pourrez voir le squelette en question contenant dans une même page le HTML et le CSS.
En faisant varier la largeur de la fenêtre vous verrez le passage des différents paliers.
Vous le trouverez aussi en annexe de l'article.
CSS d'un mobile (par défaut, résolution < 600px)
Par défaut aucune condition n'est vérifiée, c'est donc le code de base conçu pour un portable.
Tous les éléments du squelette s'affichent les uns sous les autres.
CSS d'une tablette (>600px et <900px)
La première condition est vérifiée, son code CSS est exécuté.
Les styles sont adaptés pour que les éléments de la SIDEBAR s'affichent centrés sous le CONTENT sur deux colonnes.
CSS d'un petit portable (>900px et <1200px)
La première et la deuxième condition sont vérifiées, leurs codes sont exécutés.
Les styles sont adaptés pour que les éléments de la SIDEBAR s'affichent centrés sous le CONTENT sur trois colonnes. Le CONTENT est centré et sa largeur est fixée pour une valeur maximale de 900px.
CSS d'un ordinateur de bureau (>1200px)
Les trois conditions sont vérifiées, leurs codes sont exécutés.
Les styles sont adaptés pour que les éléments de la SIDEBAR s'affichent les uns en dessous des autres sur la partie gauche de l'écran. La largeur du CONTENT reste fixée pour une valeur maximale de 900px. La largeur SIDEBAR + CONTENT est fixée pour une valeur maximale de 1200px et ils restent centrés dans la fenêtre.
Les codes CSS important
margin-left:auto; margin-right:auto; width:600px;
pour centrer un div dans un autre div.
overflow:auto;
pour que le div parent de div flottant les englobe bien.
float:left;
rendre les div flottant pour qu'ils s'affichent bien les uns à côté des autres.
clear:both;
pour qu'un div reparte du début de l'écran, suite à des div flottants.
max-width: 900px;
pour qu'un div ne soit plus fluide mais de largeur fixe lorsqu'il pourrait la dépasser.
Conclusion
C'est parce que j'avais des problèmes avec mon nouveau thème que je me suis décidé à créer ce squelette. Pour essayer de comprendre pourquoi je perdais la couleur de fond de la SIDEBAR, pourquoi en testant ce thème sur des sites, la partie droite du CONTENT était masquée et inaccessible !
Je ne connaissais pas la propriété overflow et j'avais confondu min-width avec min-device-width
Maintenant après l'avoir testé sur différents sites, je pense que le thème est réellement Responsive et s'affiche correctement sur une grande variété de périphérique.
Avant de commencer j'ai cherché partout un squelette et je n'en ai pas trouvé, c'est ce qui m'a décidé à en faire un et à le mettre en ligne, au cas où quelqu'un pourrait y trouver des réponses à ces questions !
Le code complet du squelette
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head><title>Responsive CSS !</title></head>
<style>
/* ---
(c) 2016 AkhThoT (akhthot.free.fr)
--- */
/* ---
Style habillage
--- */
*{margin:0;padding:0;color:white;}
body{color:black;text-align:center;}
div{padding:0.5em 0;border-radius:0.4em;}
#page{background-color:gold;}
#top{background-color:green;height:3em;}
#wrapper{background-color:pink;}
#main{background-color:gray;}
#content{background-color:black;height:20em;}
#sidebar{background-color:blue;}
#blognav{background-color:darkgrey;}
#blogextra{background-color:darkblue;}
#blognav div, #blogextra div{background-color:orange;height:3em;}
#footer{background-color:green;height:2em;}
/* ---
Style RESPONSIVE
--- */
@media only screen and (min-width : 600px){
#sidebar{
margin-left:auto;
margin-right:auto;
width:600px;
}
#blognav, #blogextra{
overflow:auto;
}
#blognav div, #blogextra div{
float:left;
width:300px;
}
#footer{
clear:both;
}
}
@media only screen and (min-width : 900px){
#page{
max-width: 900px;
margin-left: auto; /* pour le centrage dans le body */
margin-right: auto; /* pour le centrage dans le body */
}
#sidebar{
width:auto;
}
}
@media only screen and (min-width : 1200px){
#page{
max-width:1200px;
}
#wrapper{
overflow:auto;
}
#main{
float:right;
width: 900px;
}
#sidebar{
float:right;
width:300px;
}
#blognav div, #blogextra div{
float:none;
width:auto;
}
}
</style>
<body>BODY
<div id="page" style="">PAGE
<div id="top">TOP</div>
<div id="wrapper">WRAPPER
<div id="main">MAIN
<div id="content">CONTENT</div>
</div>
<div id="sidebar">SIDEBAR
<div id="blognav">NAV
<div>NAV-DIV-1</div>
<div>NAV-DIV-2</div>
<div>NAV-DIV-3</div>
</div>
<div id="blogextra">EXTRA
<div>EXTRA-DIV-1</div>
<div>EXTRA-DIV-2</div>
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
A vous de jouer maintenant !!!