Jouer avec (fausses requêtes de conteneurs avec une boîte à surveillance et un resizizaurus

watched-box par Heydon est un outil exceptionnel pour simuler les requêtes de conteneur. Cet élément personnalisé utilise intelligemment les noms de classe, appliqués en fonction des points d'arrêt de taille déterminés par ResizeObserver , pour imiter le comportement de requête du conteneur. Il offre une approche raffinée par rapport aux méthodes antérieures.

J'utiliserais en toute confiance watched-box en production en raison de sa nature légère, de son manque de dépendances et de sa mise en œuvre simple.

Pour le développement et les tests, le composant Web resize-asaurus de Zach fournit un ajout précieux. Il résume les éléments dans un conteneur redonnable, affichant la largeur actuelle. Cela élimine la nécessité de redimensionner toute la fenêtre du navigateur pour les tests; Les éléments individuels deviennent directement résidants.

Combinant ces composants:

<resize-asaurus><watched-box widthbreaks="320px, 600px"><div>
      ... 
    </div>
  </watched-box></resize-asaurus>

Permet le style CSS en fonction des points d'arrêt:

 .carte {
   .W-GT-320PX & {}
   .W-GT-600PX & {} 
}

Bien que ce CSS ne soit pas la syntaxe de requête de conteneur finale, elle obtient efficacement le même résultat avec des noms de classe Clear et générés.

(Exemple et liens de démonstration en direct seraient inclus ici)

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!