Penser dans les comportements, pas les tailles d'écran

Chase McCoy a écrit un excellent article sur le «problème d'écart» lors de la création de réseaux de projet. Son argument peut être résumé comme suit: Comment utiliser les marges dans CSS pour définir l'espacement des éléments? Il a souligné que lorsqu'il est utilisé avec Flexbox, l'attribut GAP n'est pas assez parfait, par exemple:

 .grille {
  Affichage: flex;
  Écart: 10px;
}

Utiliser actuellement Gap with Flexbox n'est pris en charge que dans Firefox, et je l'ai oublié dans plusieurs projets. Faites donc attention à cela.

Quoi qu'il en soit, ma partie préférée du billet de blog de Chase est la technique qu'il a mentionnée pour Andy Bell pour créer des dispositions réactives sans requêtes médiatiques, comme ceci:

 .grille {
  Affichage: grille;
  Grid-Gap: 10px;
  grille-template-colonnes: répéter (remplissage automatique, Minmax (150px, 1fr));
}

La fonction de ce code CSS est la suivante:

• Créez une grille avec un espace 10px entre les colonnes et les lignes.
• La largeur minimale de chaque colonne est de 150px.
• Chaque colonne a la même largeur (1FR).
• La grille doit remplir automatiquement autant de colonnes que possible.

La chose la plus intelligente à propos de tout cela est que notre grille implémente désormais efficacement la réactivité due à minmax - si le navigateur est redimensionné, la grille s'adaptera automatiquement à un plus petit nombre de colonnes, comme ceci:

Aucune enquête médiatique n'est requise du tout! Bien sûr, il existe plusieurs autres façons de le faire, mais je pense que cette approche est intelligente, non seulement parce que nous évitons les requêtes médiatiques - mais parce qu'elle nous apprend à réfléchir à la conception et à la construction de composants d'une manière nouvelle.

Chase Suite:

Avec cette technique, au lieu d'utiliser des points d'arrêt pour spécifier la taille de l'écran que le projet doit empiler, spécifiez plutôt la taille minimale que les éléments devraient avoir avant l'empilement. J'aime cela car il encourage les développeurs à penser à la conception réactive d'un comportement plutôt qu'à la perspective de la taille de l'écran.

"Le comportement plutôt que la taille de l'écran" est un excellent moyen de penser à la conception des composants! Beaucoup de problèmes que j'ai lors de la création de composants pour les systèmes de conception sont parce que j'ai pensé aux tailles d'écran - appareils mobiles, tablettes, ordinateurs de bureau, etc. - et essayer d'adapter ces composants à ces limites.

La réflexion dans une perspective comportementale est toujours plus efficace car il existe de nombreux autres facteurs qui affectent le composant en plus de l'écran ou de la largeur du périphérique que nous utilisons. Peut-être que nous voulons que ce composant s'adapte à un autre composant. Ou nous voulons aligner un texte auxiliaire avec lui pour comparaison.

Quoi qu'il en soit, il n'est en fait pas tout à fait possible de penser du point de vue du comportement plutôt que de la taille de l'écran avant de posséder une requête en conteneur, comme Chris l'a écrit:

Les requêtes de conteneurs sont toujours la liste supérieure des améliorations requises en CSS. La vue générale est que si nous avons des requêtes de conteneurs, nous n'écrivons pas de nombreuses requêtes médiatiques mondiales en fonction de la taille de la page. En effet, nous essayons réellement de contrôler un conteneur plus local, et la seule raison pour laquelle nous utilisons les requêtes multimédias pour cela maintenant est que c'est le meilleur outil que nous ayons dans CSS. J'y crois totalement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!