Licence CC BY-NC-SA

Rendre son site responsive avec CSS3

Adoptez un design fluide qui s'adapte aux écrans des mobiles et des tablettes !

Dernière mise à jour :
Auteur :
Catégorie :
Temps de lecture estimé : 2 heures

Un site web peut être vu sur plusieurs appareils

Votre site est tout beau, tout propre, prêt à envahir le web… (Si vous ne savez pas comment créer votre site web, rendez-vous ici.) Vous l'annoncez à votre meilleur(e) ami(e), celui (celle) qui vous soutient depuis toujours, et LA ! :waw:

Il (elle) sort son smartphone, et vous dit : "Il est peut-être cool ton site, mais depuis un mobile c'est la misère !". Et bien c'est le moment d'y remédier, non ? ;)

J'ai l'honneur de vous annoncer que vous êtes sur la bonne page !

Adapter son site au format mobile

  1. Fonctionnement de base

    1. La méthode utilisée

    2. Une seule balise magique !

    3. Quelques options

  2. Les possibilités offertes par CSS3

    1. Utiliser les media queries

    2. Le choix des médias

  3. TP : adapter un exemple au format mobile !

    1. Instructions pour réaliser le TP

    2. Correction

    3. Aller plus loin

  4. Accéder à la version pour ordinateur

    1. Le principe

    2. Un exemple avec PHP

  5. JavaScript : dérouler ses menus

    1. Créer son bouton !

    2. Avec un peu de JavaScript

    3. Gérer la désactivation du JavaScript



Et voilà, c'est fini ! Votre site est tout beau, tout propre, et votre ami(e) peut aller le voir depuis un smartphone (ou même une tablette ;) ) !

Bon codage à tous ! :D

Remerciements

  • Aux bêta-testeurs, qui m'ont encouragé à continuer ce tutoriel ;
  • Aux lecteurs, dont les commentaires m'ont fait plaisir et m'ont appris de nouvelles choses ;
  • À Spader, qui m'a permis de concevoir un cours qui tient la route ;
  • Et bien sûr à M@teo21, créateur du Site du Zéro, sans qui je ne connaîtrait même pas les rudiments des sites internets.

Aucun commentaire

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte