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 :

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

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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