Responsive design – Media Queries – Facile

responsive-web-designBonjour à tous, vous avez visité pas mal de sites pour apprendre le responsive design et vous n'y comprenez rien ? Nous allons essayer d'être le plus clair possible et de présenter la base du responsive avec un exemple très simple, un pokédex !

Le but sera de fermer le pokédex lorsque l'on réduira la taille du navigateur.

La première chose à faire est d'écrire le code css que vous souhaitez utiliser sur un écran d'ordinateur normal.

Code CSS du pokédex :

#all { width:805px; height:550px; margin:auto; }  #partie_gauche { float:left; background-color:red; border:solid #000 1px; border-radius:60px 0 0 60px; width:400px; height:550px; border-color:#000; }  #partie_sperieure { border:solid #000 1px; border-radius:60px 0 0 0; width:386px; height:100px; margin:5px; }  #rond_en_verre_bords { float:left; background-color:#FFF; border:solid #000 1px; border-radius:80px; width:80px; height:80px; border-color:#000; margin:10px 0 0 20px; }  #rond_en_verre_centre { background-color:#0FF; border:solid #000 1px; border-radius:70px; width:70px; height:70px; border-color:#000; margin:4px auto auto; }  #rond_en_rouge { float:left; background-color:red; border-radius:10px; border:solid #000 1px; width:20px; height:20px; margin:10px 0 0 15px; }  #rond_en_jaune { float:left; background-color:#FF0; border-radius:10px; border:solid #000 1px; width:20px; height:20px; margin:10px 0 0 15px; }  #rond_en_vert { float:left; background-color:green; border-radius:10px; border:solid #000 1px; width:20px; height:20px; margin:10px 0 0 15px; }  #autour_ecran { clear:both; background-color:gray; border-radius:10px 10px 10px 70px; border:solid #000 1px; width:350px; height:260px; margin:10px auto 0; }  #petit_rond_rouge_1 { float:left; background-color:red; border-radius:10px; border:solid #000 1px; width:10px; height:10px; margin:5px 0 0 155px; }  #petit_rond_rouge_2 { float:left; background-color:red; border-radius:10px; border:solid #000 1px; width:10px; height:10px; margin:5px 0 0 7px; }  #ecran { text-align:center; clear:both; background-color:#FFF; border-radius:10px; border:solid #000 1px; width:300px; height:180px; margin:20px auto 0; }  #image { margin-top:-10px; }  #gros_rond_rouge { float:left; background-color:red; border:solid #000 1px; border-radius:40px; width:40px; height:40px; margin:5px 0 0 40px; }  #son { float:right; width:80px; height:50px; margin:5px 40px 0 0; }  #trait_1 { float:left; background-color:#000; border:solid #000 1px; border-radius:40px; width:80px; height:5px; }  #trait_2 { float:left; background-color:#000; border:solid #000 1px; border-radius:40px; width:80px; height:5px; margin:5px 40px 0 0; }  #rond_bleu { clear:both; float:left; background-color:blue; border:solid #000 1px; border-radius:40px; width:40px; height:40px; margin:15px 0 0 40px; }  #rond_long_vert_1 { float:left; background-color:green; border-radius:10px; border:solid #000 1px; width:60px; height:15px; margin:32px 0 0 40px; }  #rond_long_orange_1 { float:left; background-color:orange; border-radius:10px; border:solid #000 1px; width:60px; height:15px; margin:32px 0 0 20px; }  #rectangle_jaune { clear:both; float:left; background-color:#FF0; border-radius:10px; border:solid #000 1px; width:130px; height:65px; margin:20px 0 0 110px; }  #CROIX { float:left; width:95px; height:95px; margin:0 0 0 30px; }  #croix_haut { width:30px; height:30px; border:solid #000 1px; border-bottom:none; background-color:gray; margin:auto; }  #croix_centre_1 { float:left; width:30px; height:30px; border:solid #000 1px; border-right:none; background-color:gray; margin:0 0 0 2px; }  #croix_centre_2 { float:left; width:30px; height:32px; background-color:gray; margin:auto; }  #croix_centre_3 { float:left; width:30px; height:30px; border:solid #000 1px; border-left:none; background-color:gray; margin:auto; }  #croix_cercle { float:left; border-radius:10px; width:20px; height:20px; border:solid #000 1px; background-color:gray; margin:4px; }  #croix_bas { clear:both; width:30px; height:30px; border:solid #000 1px; border-top:none; background-color:gray; margin:auto; }  #partie_droite { float:left; margin-top:115px; background-color:red; border:solid #000 1px; border-radius:0 0 60px 0; width:400px; height:435px; border-color:#000; }  #ecran_vert { background-color:green; border-radius:10px; border:solid #000 1px; width:300px; height:150px; margin:10px auto 0; }  #boutons_bleu_1 { float:left; background-color:blue; border-radius:10px 0 0 0; border:solid #000 1px; width:40px; height:40px; margin:20px auto 0 100px; }  #boutons_bleu_5 { float:left; background-color:blue; border-radius:0 10px 0 0; border:solid #000 1px; width:40px; height:40px; margin:20px auto 0 0; }  #boutons_bleu_6 { clear:both; float:left; background-color:blue; border-radius:0 0 0 10px; border:solid #000 1px; width:40px; height:40px; margin:0 auto 0 100px; }  #boutons_bleu_10 { float:left; background-color:blue; border-radius:0 0 10px 0; border:solid #000 1px; width:40px; height:40px; }  #voyant_orange { clear:both; float:left; background-color:orange; border-radius:10px; border:solid #000 1px; width:20px; height:20px; margin:20px 0 0 80px; }  #voyant_vert { float:left; background-color:green; border-radius:10px; border:solid #000 1px; width:20px; height:20px; margin:20px 0 0 15px; }  #rond_long_vert_2 { float:left; background-color:green; border-radius:10px; border:solid #000 1px; width:60px; height:15px; margin:22px 0 0 40px; }  #rond_long_orange_2 { float:left; background-color:orange; border-radius:10px; border:solid #000 1px; width:60px; height:15px; margin:22px 0 0 20px; }  #fleche_gauche { clear:both; float:left; background-color:gray; border-radius:10px 0 0 10px; border:solid #000 1px; width:40px; height:40px; margin:10px 0 0 100px; }  #fleche_droite { float:left; background-color:gray; border-radius:0 10px 10px 0; border:solid #000 1px; width:40px; height:40px; margin:10px 0 0; }  #supprimer { float:left; background-color:blue; border-radius:35px; border:solid #000 1px; width:35px; height:35px; margin:10px 0 0 100px; }  #reclangle_orange_1 { clear:both; float:left; background-color:orange; border-radius:10px; border:solid #000 1px; width:110px; height:55px; margin:10px 0 0 65px; }  #reclangle_orange_2 { float:left; background-color:orange; border-radius:10px; border:solid #000 1px; width:110px; height:55px; margin:10px 0 0 50px; }  #trait_3,#trait_4 { float:left; background-color:#000; border:solid #000 1px; border-radius:40px; width:80px; height:5px; border-color:#000; margin:5px 40px 0 0; }  #boutons_bleu_2,#boutons_bleu_3,#boutons_bleu_4 { float:left; background-color:blue; border:solid #000 1px; width:40px; height:40px; margin:20px auto 0 0; }  #boutons_bleu_7,#boutons_bleu_8,#boutons_bleu_9 { float:left; background-color:blue; border:solid #000 1px; width:40px; height:40px; }

Vous devrez ensuite ajouter à ce code le code pour le responsive.
Ce code commence toujours par @media suivi du type de media. Ici nous sommes sur un écran donc nous prendrons "screen" sachez qu'il existe d'autres types de médias comme "print" par exemple qui vous permettra de changer l'affichage lors d'une impression.
Ensuite il faut dire au navigateur à combien de pixel de large il doit changer l'affichage.

max-width: 950px -> pour lui dire " De 0 à 950px, tu m'affiche ce qui suit"
min-width: 950px -> pour lui dire " De 950px à l'infini, tu m'affiche ce qui suit"

Enfin vous écrivez tout ce qui doit changer lorsque vous modifiez la taille de votre navigateur.

Code CSS responsive:

@media screen and (max-width:950px) {
    #all {
        width: 404px;
        height: 550px;
        margin: auto;
    }

    #close {
        border: solid #000 1px;
        border-radius: 0 0 0 60px;
        width: 386px;
        height: 430px;
        margin: 5px;
    }

    #partie_centrale,#partie_basse,#partie_droite {
        display: none;
    };
}

Ici, j'ai donc redimensionné tout le pokédex pour qu'il reste centré avec #all.
Rajouté des bordures avec #close.
Et caché la partie centrale, basse et la partie de droite avec l'attribut "display: none;"

Tester le responsive design avec l'exemple du pokédex en modifiant la taille de votre navigateur.

L'intérêt du responsive design est d'adapter votre site internet à tous types d'écran avec un seul fichier et un seul site. Plus besoin d'avoir un site spécialement pour le mobile plus un pour les ordinateurs.

En espérant avoir été clair et simple.

1 Comments
  1. Martin
    6 août 2013 at 15:47
    Reply

    Super tuto, très clair et bien expliqué ! 5 *

Laisser un commentaire