20 & 27 novembre 2018

Introduction au web responsive

Objectif :

  • Adapter son site à l’ensemble des appareils disponibles sur le marché aujourd’hui
  • Eviter de développer un site pour chacun des types de résolutions

Moyens :

On utilise la puissance de la codification CSS pour donner des instructions spécifiques à certaines résolutions

Ressources :

  • Média queries pour les appareils standards => lien
  • Liste des media queries => lien

Exemple : 

@media (min-width: 1281px) {
    p {
        color: #ffcc00; 
        background-color: black;
        font-size: 1.2em;
      }
}
@media (min-width: 1200px) and (max-width: 1280px){
// CSS
}
@media (min-width: 1025px) and (max-width: 1999px){
// CSS
}

Exercice :

  • Ecrire des morceaux de codes spécifiques pour des résolutions différentes 
  • Tester en ligne les effets
  • Adapter le site test pour qu’il devienne responsive

Téléchargements :

  • Exemple de feuille de style pour site responsive = > lien
  • Solution pour transformer cotre site en site responsive => lien (à ne télécharger que pour comprendre !)

 27 novembre

Création d’une page responsive avec l’utilisation de l’instruction box-sizing

Téléchargez la demo




Lire aussi les articles suivants :