Dispositions réactives, moins de requêtes multimédias

La conception réactive est une pierre angulaire du développement Web moderne. Les requêtes médiatiques sont depuis longtemps essentielles, mais les progrès du CSS offrent des techniques pour réduire considérablement leur dépendance. Cet article montre comment créer des dispositions réactives avec des requêtes multimédias minimales, voire nulles, entraînant un code plus propre et plus maintenable.

Nous explorerons les approches Flexbox et basées sur la grille pour atteindre la réactivité sans point de rupture de requête multimédia explicite.

Tiration de Flexbox et flex-wrap

Un exemple simple utilise flex: 400px pour définir une largeur de base pour les éléments. Les articles s'envolent sur de nouvelles lignes lorsqu'il existe un espace insuffisant. L'espace restant est réparti entre les éléments de chaque ligne. flex: 400px est un raccourci pour flex-grow: 1; flex-shrink: 1; flex-basis: 400px; .

Cette approche offre une brièveté (deux lignes de code), mais manque de contrôle à grain fin sur les largeurs de pied de page cohérentes, les éléments par ligne et le comportement d'emballage.

Utilisation de auto-fit et minmax avec la grille CSS

La grille CSS, en utilisant repeat(auto-fit, minmax(400px, 1fr)) , fournit une largeur de base similaire, avec un comportement d'emballage. Les éléments se développent pour remplir l'espace disponible, en maintenant des largeurs cohérentes entre les lignes. Cependant, les articles ne peuvent pas diminuer en dessous de 400px, provoquant potentiellement un débordement.

Contrôle des articles par ligne

Refiner l'approche Flexbox, nous remplaçons flex: 400px par flex: max(400px, (100% - 20px)/3); . Cela limite chaque ligne à un maximum de trois éléments. Le 20px représente deux lacunes (en supposant un écart de 10px entre les éléments). Une formule plus généralisée, max(400px, 100%/(N 1) 0.1%) , élimine le besoin de calcul explicite des écarts, où N représente le nombre maximum d'articles par ligne. Cela fournit un contrôle partiel sur les articles par ligne. Le même principe s'applique à la grille CSS.

Assurer à ce que les articles se développent et rétrécissent

Pour résoudre le problème de débordement avec l'approche de la grille, nous utilisons clamp(100%/(N 1) 0.1%, 400px, 100%) . Cela garantit que les articles se développent pour remplir l'espace disponible mais ne dépassent jamais la largeur du conteneur.

Contrôle de contrôle avec précision

Pour contrôler lorsque les éléments enveloppent, nous modifions la formule clamp() en: clamp(100%/(N 1) 0.1%, (400px - 100vw)*1000, 100%) . Lorsque la largeur de l'écran (100VW) dépasse 400px, nous avons n éléments par ligne. En dessous de 400px, nous obtenons un élément pleine largeur par ligne, créant efficacement un point d'arrêt sans requête multimédia. 400px agit comme le point d'arrêt ici.

Gérer plusieurs points d'arrêt

Pour gérer les transitions entre plusieurs dénombrements d'articles (par exemple, de N à M éléments par ligne), nous nid clamp() Fonctions: clamp(clamp(100%/(N 1) 0.1%, (W1 - 100vw)*1000,100%/(M 1) 0.1%), (W2 - 100vw)*1000, 100%) . W1 et W2 représentent les points d'arrêt. Cela permet un comportement réactif sophistiqué avec une seule déclaration CSS. La nidification supplémentaire étend cela à plus de points d'arrêt.

Simulation de requêtes de conteneur

En remplaçant 100vw par 100% , nous pouvons simuler les requêtes de conteneur, ce qui rend la mise en page réactive à la largeur du conteneur plutôt qu'à la fenêtre.

Techniques avancées

Au-delà du contrôle de la colonne, nous pouvons créer des styles conditionnels en fonction des dimensions des éléments ou de la taille de l'écran.

Couleur d'arrière-plan conditionnel: en utilisant des gradients linéaires, nous pouvons modifier conditionnellement la couleur d'arrière-plan en fonction de la largeur des éléments:

 div {
  Contexte: Linear-Gradient (vert 0 0) 0 / max (0px, 100px - 100%) 1px, rouge;
}

Visibilité de l'élément bascule: nous pouvons simuler des éléments de cachette en fonction de la taille de l'écran à l'aide clamp() et overflow: hidden; .

Modification de la position de l'élément: nous pouvons ajuster dynamiquement la position des éléments (par exemple, top , left ) en fonction de la taille de l'écran à l'aide de clamp() .

Conclusion

Bien que les requêtes médiatiques restent précieuses, ces techniques montrent comment réaliser une conception réactive sophistiquée avec une dépendance réduite à leur égard. L'accent n'est pas mis sur l'élimination des requêtes multimédias entièrement, mais sur l'optimisation du code et la mise à profit des capacités de CSS pour créer des dispositions dynamiques et réactives. Ces stratégies offrent un contrôle puissant et un code plus propre, améliorant la maintenabilité et l'efficacité.

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!