Avez-vous rencontré une situation où le texte et les blocs qui s'intègrent parfaitement dans la mise en page de Photoshop pour une raison quelconque ne veulent obstinément pas obéir à la mise en page - ne tiennent pas dans la largeur spécifiée par la mise en page? En même temps, le concepteur et le concepteur de mise en page utilisent la même grille, par exemple, la grille Bootstrap 3.
Après avoir examiné un nombre important de sites, je suis arrivé à la conclusion qu'au sein des concepteurs et des concepteurs de mise en page, une erreur courante s'est glissée.
La grille de bootstrap, comme exemple de grille courante, configure une disposition à 12 colonnes qui, sur des écrans de 1200 pixels ou plus, a des dimensions comprises entre 30 colonnes et 15 marges latérales de contenu à gauche et à droite. Étant donné que la largeur des colonnes est définie par le concepteur en pixels et le concepteur de mise en page en pourcentage, l'erreur décrite ci-dessous n'est pas immédiatement perceptible.
Comment un concepteur travaille-t-il avec une grille? Habituellement, cette grille est générée par un service, téléchargée et installée dans Photoshop. Comment le concepteur de mise en page fonctionne-t-il avec la grille? Le maillage est tiré du framework Bootstrap 3.
Alors quel est le problème si les dimensions de la grille (colonnes et intervalles) sont les mêmes?
L'essence du problème réside dans la propriété CSS pratique «box-sizing» avec la valeur «border-box», qui est définie par défaut dans bootstrap. Pour cette raison, le concepteur considère la largeur des marges latérales en plus de la largeur du contenu (1170px plus les marges latérales de 15px à droite et à gauche), et le concepteur de mise en page lui-même, sans le savoir, les inclut dans la largeur du contenu (1170px, y compris les marges latérales de 15px, c'est-à-dire La largeur du contenu est de 1140 px). Ainsi, il s'avère que dans le projet à différentes étapes, deux grilles différentes sont utilisées et le concepteur de mise en page en a une plus étroite.
Cette erreur se produit également lors de l'utilisation de grilles autres que Bootstrap. Apparemment, il est né avec l'avènement du "border-box".
La solution est simple - ajustez la taille du conteneur: "container {width: 1200px;}" (1170px - contenu plus indentation de 15px à droite et à gauche). Il est également nécessaire d'effectuer le réglage approprié du conteneur par la quantité d'espacement latéral pour les écrans d'autres résolutions.
Il me semble que cela n'a aucun sens de discuter de qui est responsable de la correction de l'erreur. C'est une bonne forme pour le concepteur de clarifier cette question avec le concepteur de mise en page, et le concepteur de mise en page doit se souvenir de cette caractéristique de l'utilisation de la "bordure-boîte" pour la grille. Les corrections de bogues dans un cadre répandu augmenteront également le nombre de sites qui correspondent strictement à la conception.