learn responsive web

created by A. Mondt
last update February 2019

Description

learning Responsive web
page

Instructions

1. Changer la couleur

Crée un fichier html et un fichier CSS. Fais en sorte que la couleur de fond du Body soit rouge lorsque la largeur du viewport est inférieure à 300px, verte lorsque la largeur du viewport est supérieure à 300px et inférieure à 768px, et bleue lorsque le viewport est supérieur à 768px.

2. Montrer / cacher des éléments

Rajoute trois div: une div avec l' id="small", une div avec l'id="medium", une div avec l'id = "large". Pour qu'on puisse les voir, dans chacune affiche le texte "Petit", "moyen" ou "grand".

Fais en sorte que n'apparaisse que la DIV concernée, en fonction de la largeur du viewport.

3. Adapter la taille du texte en fonction de l'appareil

Dans chaque DIV, ajoute un titre et quelques paragraphes (lorem ipsum, genre). Donne lui un texte descriptif (par exemple: "Contenu pour téléphones"). Adapte la taille de la police en fonction de la plateforme.

4. Adapter la disposition

Fais en sorte que :

• en petit, les 3 divs soient l'une en dessous de l'autre
• en moyen, la première fasse 2/3 de la largeur, la deuxième 1/3 et la troisième toute la largeur
• en grand, les 3 div soient l'une à côté de l'autre.