Connaître la gestion des écrans en responsive design aujourd’hui est fondamental si on veut des sites web mobile-friendly qui se classent #1 sur Google.
Après les unités de mesures relatives, nous continuons cette série avec la gestion des tailles d’écran.
Lorsqu’une personne visite un site web, il est possible qu’elle le voit sur un téléphone, une tablette, un ordinateur ou même un écran de télévision. Les tailles d’écran pouvant varier considérablement d’un appareil à l’autre, il est important que les sites Web redimensionnent et réorganisent leur contenu afin de s’adapter au mieux aux écrans de toutes les tailles.
Lorsqu’un site Web ne répond pas à différentes tailles d’écran, il peut sembler étrange ou devenir indéchiffrable sur certains appareils. Cela se produit généralement sur des écrans plus petits, comme des téléphones. Lorsqu’un site Web réagit à la taille de l’écran, il est appelé un site Web réactif.
Les sites Web pouvant être affichés sur des milliers de tailles d’écran différentes, ils doivent pouvoir réagir à un changement de taille d’écran et adapter le contenu de manière à ce que les utilisateurs puissent y accéder.
Gestion des écrans : les media queries
Les CSS utilisent des media queries pour adapter le contenu d’un site Web à différentes tailles d’écran. Avec les media queries, les CSS peuvent détecter la taille de l’écran actuel et appliquer différents styles CSS en fonction de la largeur de l’écran.
L’exemple ci-dessus montre comment les media queries sont appliquées. Les media queries définissent une règle pour les écrans de moins de 480 pixels (environ la largeur de nombreux smartphones en orientation paysage).
Décomposons cet exemple en plusieurs parties:
@media– Ce mot-clé commence une règle de media query et indique au compilateur CSS comment analyser le reste de la règle.only screen– Indique quels types de périphériques doivent utiliser cette règle. Dans les précédentes tentatives visant à cibler différents périphériques, les CSS intégraient différents types de supports (écran, impression, ordinateur de poche). La raison en était qu’en connaissant le type de support, les règles CSS appropriées pouvaient être appliquées.
Cependant, les périphériques «portables» et «écrans» ont commencé à occuper une large gamme de tailles ce qui rendait insuffisant l’utilisation d’une seule règle CSS par périphérique multimédia.screenest le type de support toujours utilisé pour l’affichage du contenu, quel que soit le type d’appareil. Le mot-cléonlyest ajouté pour indiquer que cette règle ne s’applique qu’à un seul type de média (screen).and (max-width: 480px)– Cette partie de la règle est appelée fonctionnalité multimédia et indique au compilateur CSS d’appliquer les styles CSS aux périphériques d’une largeur inférieure ou égale à 480 pixels. Les fonctionnalités multimédias sont les conditions qui doivent être remplies pour interpreter le CSS dans un media query.- Les règles CSS sont imbriquées à l’intérieur des accolades de la requête multimédia. Les règles seront appliquées lorsque la requête multimédia sera satisfaite. Dans l’exemple ci-dessus, le texte de l’élément
bodyest défini sur une taille de police de12pxlorsque l’écran de l’utilisateur est inférieur à 480px.
Gestion des écrans : les intervalles
Des tailles d’écran spécifiques peuvent être ciblées en définissant plusieurs hauteurs et largeurs au niveau des fonctionnalites media. min-width et min-height sont utilisés pour définir respectivement la largeur minimale et la hauteur minimale. Inversement, max-width et max-height définissent respectivement la largeur maximale et la hauteur maximale.
En utilisant plusieurs largeurs et hauteurs, une plage peut être définie pour un media query.
L’exemple ci-dessus n’appliquerait ses règles CSS que lorsque la taille de l’écran sera comprise entre 320 pixels et 480 pixels. Notez l’utilisation d’un deuxième mot-clé and après la fonctionnalité média min-width. Cela nous permet de chaîner deux exigences ensemble.
L’exemple ci-dessus peut également être écrit en utilisant deux règles distinctes:
La première requête multimédia de l’exemple ci-dessus appliquera les règles CSS lorsque la taille de l’écran atteindra ou dépassera 320 pixels. La deuxième requête multimédia appliquera les règles CSS lorsque la taille de l’écran atteindra ou dépassera 480 pixels, ce qui signifie qu’elle remplacera les règles CSS présentes dans la première requête multimédia.
Les deux exemples ci-dessus sont valides et il est probable que vous voyez ces deux modèles utilisées en parcourant le code d’un autre développeur.
Gestion des écrans : points par pouce (Dots per inch – DPI)
Une autre fonctionnalité multimédia que nous pouvons cibler est la résolution de l’écran. Souvent, nous voudrions fournir des supports de meilleure qualité (images, vidéo, etc.) uniquement aux utilisateurs disposant d’écrans prenant en charge les supports haute résolution. Cibler la résolution d’écran permet également aux utilisateurs d’éviter de télécharger des images haute résolution (grande taille de fichiers) que leur écran ne peut pas afficher correctement.
Pour cibler par résolution, nous pouvons utiliser les fonctionnalités média min-resolution et max-resolution. Ces fonctions de support acceptent une valeur de résolution exprimée en points par pouce (dpi) ou en points par centimètre (dpc). En savoir plus sur les mesures de résolution ici
le media query dans l’exemple ci-dessus cible les écrans haute résolution en s’assurant que la résolution de l’écran soit d’au moins 300 points par pouce. Si la requête de cette résolution d’écran est satisfaite, nous pouvons utiliser les CSS pour afficher des images haute résolution et d’autres supports.
Gestion des écrans : l’operateur and
Dans les exemples précédents, nous avons liés plusieurs fonctionnalités multimédia du même type dans un media query à l’aide de l’opérateur and. Cela nous a permis de créer une plage en utilisant min-width et max-width dans le même media query.
L’opérateur and peut être utilisé pour exiger plusieurs fonctionnalités média. Par conséquent, nous pouvons utiliser l’opérateur and pour exiger à la fois une max-width de 480 pixels et une min-resolution de 300 dpi.
Par exemple:
En plaçant l’opérateur and entre les deux fonctionnalités média, le navigateur exige que les deux fonctionnalités média soient vraies avant d’appliquer le code CSS present dans le media query. Les opérateurs and peuvent être utilisés pour chaîner autant de fonctionnalités multimédia nécessaire.
Liste séparée par des virgules
Si une seule des multiples fonctionnalités multimédia d’un media query doit être satisfaite pour appliquer les règles CSS, les fonctionnalités multimédia doivent être séparées par des virgules.
Par exemple, si nous avions besoin d’appliquer un style alors qu’une seule des conditions suivantes est vraie:
- La largeur de l’écran est supérieure à 480 pixels.
- L’écran est en mode paysage
Nous pourrions alors écrire :
Dans l’exemple ci-dessus, nous avons utilisé une virgule (,) pour séparer plusieurs règles. Cet exemple requiert qu’une seule des fonctionnalités média soit vraie pour que son CSS s’applique.
Notez que la deuxième fonctionnalité média est l’orientation. La fonction de support d’orientation détecte si la page a plus de largeur que de hauteur. Si une page est plus large, elle est considérée comme paysage « landscape » et si une page est plus haute, elle est considérée comme portrait.
Gestion des écrans : les breakpoints
Nous savons comment utiliser les media queries pour appliquer des règles CSS basées sur la taille et la résolution de l’écran, mais comment déterminer les requêtes à définir?
Les points sur lesquels les media queries sont définies sont appelés breakpoints (points d’arrêt). Les breakpoints sont les tailles d’écran auxquelles votre page Web n’apparaît pas correctement. Par exemple, si vous souhaitez cibler des tablettes orientées en paysage, vous pouvez créer le breakpoint suivant :
L’exemple ci-dessus crée une taille d’écran correspondant à la taille d’une tablette en mode paysage et identifie également l’orientation.
Toutefois, il serait extrêmement difficile de définir des breakpoints pour chaque périphérique imaginable, car il existe de nombreux périphériques de formes et de tailles différentes. De plus, de nouveaux appareils sont publiés avec de nouvelles tailles d’écran chaque année.
Plutôt que de définir des breakpoints en fonction de périphériques spécifiques, la meilleure pratique consiste à redimensionner votre navigateur pour afficher les zones de rupture naturelle du site Web en fonction de son contenu. Les dimensions auxquelles la mise en page se casse ou semble étrange deviennent les points de rupture de votre media query. Au sein de ces breakpoints, nous pouvons ajuster le CSS pour que la page soit redimensionnée et réorganisée.
En observant les dimensions auxquelles un site Web se casse naturellement, vous pouvez définir des breakpoints à vos media queries qui créent la meilleure expérience utilisateur possible sur un projet donné, au lieu d’obliger chacun de vos projets à s’adapter à une certaine taille d’écran. Différents projets ont des besoins différents, et créer un design responsive ne devrait pas en être autrement.
Consultez la liste ci-dessous de breakpoints par largeur de périphérique.
Utilisez-la comme référence de largeur d’écran pour tester votre site Web afin de vous assurer qu’il a fière allure sur de nombreux appareils.
