Utilisation des requêtes de support pour cibler les périphériques mobiles

Les styles CSS des listes sociales par défaut utilisent les requêtes de support CSS3 pour cibler les périphériques mobiles spécifiques et implémenter une conception Web réactive. En savoir plus sur les requêtes de support.

Pourquoi et quand exécuter cette tâche

La requête de support utilisée par le rendu social est au format suivant :
@media screen and (max-width: $valuepx) {
   ....
}
où $value est une valeur de type entier qui définit la largeur maximale de l'écran en pixels. Les règles dans ce bloc de requête ne s'appliquent pas aux largeurs d'écran supérieures à ce qui a été défini. Pour définir des styles réactifs, vous pouvez utiliser plusieurs requêtes de ce type avec des largeurs maximales de l'écran décroissantes. Par exemple, vous pouvez démarrer le masquage d'éléments dans votre marquage sur une tablette en mode portrait. Vous pouvez ensuite continuer à masquer davantage d'éléments sur un smartphone en mode paysage puis afficher uniquement un volume de données minimal sur les smartphones en mode portrait.

Exemple

Le balisage de liste sociale par défaut définit une barre sociale pour chaque type d'entrée, ce qui occupe un espace vertical. Pour économiser de l'espace vertical sur les appareils mobiles, vous pouvez masquer soit le lien Vue de la barre sociale, soit la barre sociale complète. Dans l'exemple suivant, vous souhaitez configurer les dispositions spatiales suivantes pour l'affichage sur les smartphones :
  • En mode paysage smartphone, vous pouvez masquer le lien Vue dans la barre sociale de l'objet social.
  • En mode portrait smartphone, vous pouvez masquer la barre sociale. De cette façon, vous réservez l'espace vertical complet pour afficher uniquement le titre et le résumé de l'objet social.
Pour réaliser cette réduction, vous pouvez utiliser les requêtes de support CSS3 comme indiqué dans l'exemple de code suivant :
   @media screen and (max-width: 480px) {
       .lotusui30 .srComponent .srViewSocialObject {
           display: none;
           width: 0px;
       }
   }

   @media screen and (max-width: 320px) {
       .lotusui30 .srComponent div.srSocialBar {
           display: none;  
       }
   }
Les requêtes de support dans cet exemple fonctionnent comme suit :
  1. La première requête de support garantit que le lien Vue dans la barre sociale estmasqué sur les écrans d'une largeur inférieure ou égale à 480 pixels.
  2. La deuxième requête de support garantit que la barre sociale de l'objet social est masquée complètement sur les écrans d'une largeur inférieure ou égale à 320 pixels.
Pour les écrans d'une largeur comprise entre 321 et 480 pixels, seule la première requête s'applique. Pour les écrans d'une largeur inférieure ou égale à 320 pixels, les deux requêtes s'appliquent.