Détection de la densité de pixels et application d'images appropriées
Objectifs
Les objectifs de cette vidéo incluent l'apprentissage de la création de feuilles de style spécifiques pour différentes densités de pixels et l'utilisation de Media Queries pour gérer les variations de densité et de taille d'écran.
Résumé
Cette leçon couvre l'utilisation des Media Queries en CSS pour gérer la densité de pixels sur différents dispositifs mobiles.
Description
Dans cette leçon, nous allons ajouter un title à notre page HTML et implémenter la détection de la densité de pixels à l'aide des Media Queries en CSS. Nous allons voir comment les smartphones, qu'ils soient iPhone ou Android, présentent des différences significatives en termes de nombre de pixels par pouce (DPI). En prenant comme référence un iPhone 3GS avec une densité de 166 pixels par pouce, nous allons configurer notre page pour mieux correspondre aux densités des autres appareils, comme l'iPhone 4 qui a une densité doublée.
Deux feuilles de style seront créées : style 320.css pour les écrans de densité standard et style.css pour les écrans à haute densité. Nous allons configurer les arrières-plans de manière appropriée en utilisant des images de taille adaptée (320 pixels et 640 pixels). L'objectif est d'assurer une visualisation correcte sur tous les dispositifs, y compris les tablettes comme l'iPad. Nous verrons ensuite comment lier ces feuilles de style à notre page HTML en utilisant les Media Queries pour détecter la densité de pixels et appliquer les styles correspondants.
Questions - réponses
-webkit-device-pixel-ratio, permettant ainsi d'appliquer des styles spécifiques en fonction du nombre de pixels par pouce.
Programme détaillé
Module 1 - Introduction
Module 2 - Généralités sur le marché des mobiles
Module 3 - Rappel HTML
Module 4 - Rappel CSS
Module 5 - Notions de HTML5 et CSS3
Module 6 - Concevoir une webApp
Module 7 - Les simulateurs
Module 8 - Construire sa première WebApp
Module 9 - Vérifier et compresser
Module 10 - Construire une webApp avec JQuery Mobile
Module 11 - Annexe 1 | Notions de bande passante
Module 12 - Annexe 2 | Les usages
Module 13 - Annexe 3 | Les librairies disponibles
Module 14 - Conclusion
