Responsive Design – Exemple complet avec code source

L'EXEMPLE

responsive_affichage_exemple1Voici un exemple d'une page web en Responsive Design implémentée avec des @media queries sur la propriété max-width et avec un menu en mode hamburger comme expliqué dans les leçons précédentes.

Page en Responsive Design

Ouvrir la page dans Firefox et la mettre en mode "vue adaptative". Utiliser l'outil pour manipuler la largeur de l'écran simulé. Réduire la largeur et remarquer les points de bascule et ce qui changent dans l'affichage à chacun de ces points.

Comparer le comportement de la page avec celle-ci, qui n'est pas implémentée en Responsive Design :

La même page sans les éléménts de Responsive Design

 

LE CODE SOURCE

Voici un fichier zip avec tous les éléments HTML, CSS, JavaScript, images etc

Fichier ZIP avec le code source

Remarques :

  • il y a 2 fichiers HTML (responsivedesign01_avec.html et responsivedesign01_sans.html) qui correspondent aux 2 pages ci-dessus. Le fichier "avec" est la page avec les éléments de Responsive Design. Le fichier "sans" est la page sans les éléments de Responsive Design.
  • le fichier css/responsivedesign01_default.css est un fichier commun aux 2 pages HTML.
  • les autres fichiers CSS sont exploités uniquement par responsivedesign01_avec.html)
  • le fichier responsivedesign01_extra.css contient des styles pour le hamburger, mais ne contient pas de @media queries
  • le fichier responsivedesign01.js contient du code JavaScript pour basculer le hamburger en menu dévoilé
  • les autres fichiers CSS (responsivedesign01_max*.css) sont les fichiers qui mettent en application les @media queries

 

EXERCICE

Prendre le fichier responsivedesign01_avec.html et commenter les lignes qui mettent en application les @media queries, ainsi :


<head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive Design 01 AVEC</title>
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_default.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_extra.css">
<!--
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max1480.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max1240.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max1000.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max750.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max400.css">
-->
		<script type="text/javascript" language="JavaScript" src="js/responsivedesign01.js"></script>
    </head>

Ensuite :

  • tester la page et remarquer son comportement
  • remettre en place (déplacer en dehors de la section commentaire) le fichier CSS responsivedesign01_max1480.css (voir code ci-dessous)
  • tester la page et remarquer son nouveau comportement
  • continuer ainsi avec chaque fichier CSS un par un (responsivedesign01_max1240.css, puis responsivedesign01_max1000.css, etc)
  • à chaque étape essayer de comprendre comment le code CSS ajouté peut expliquer le nouveau comportement

 


<head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive Design 01 AVEC</title>
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_default.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_extra.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max1480.css">
<!--
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max1240.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max1000.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max750.css">
		<link rel="stylesheet" type="text/css" href="css/responsivedesign01_max400.css">
-->
		<script type="text/javascript" language="JavaScript" src="js/responsivedesign01.js"></script>
    </head>