Pourquoi largeur 960px?

1024px est la largeur d'écran maximale visée. Nous devons permettre un peu de chrome de fenêtre, il a donc besoin d'être moins. Nous aimerions idéalement qu'il ait beaucoup de facteurs, nous permettant de le diviser en colonnes de taille égale avec des largeurs entières.

960 a beaucoup de facteurs:

echo factors(960);
1  2  3  4  5  6  8  10  12  15  16  20  24  30  32  40  48  60  64  80  96  120  160  192  240  320  480  960 

1000 n'a pas autant de

echo factors(1000);
1  2  4  5  8  10  20  25  40  50  100  125  200  250  500  1000  

plus Précisément, vous pouvez facilement diviser 960 en 2,3,4,5,6 et 8 colonnes.

pourquoi 960px est suggéré pour la mise en page du site?

960 pixels est une largeur commune pour les mises en page web parce que 1024 x 768 était la résolution la plus commune depuis de nombreuses années et les concepteurs ont été forcés de concevoir pour le plus petit dénominateur commun. Lors de la conception à une largeur fixe, il est sage de concevoir de sorte que la plupart des gens ne voient pas une barre de défilement horizontale. Si votre conception est de 1024 pixels de large, une page qui est plus élevé que le viewport( disons 768 pixels pour la simplicité), va soudainement introduire un barre de défilement verticale, dévorant l'espace horizontal disponible qui est soudainement inférieur à 1024 pixels (1024 moins la largeur de la barre de défilement verticale).

c'est un filet de sécurité partiellement faux pour baser le design sur une largeur fixe de 960 pixels, bien que, puisque beaucoup de gens ne vont pas maximiser leurs fenêtres ou même les redimensionner correctement, donc même avec des résolutions supérieures à 1024, leur fenêtre de navigateur pourrait ne pas correspondre à 960 pixels. C'est pourquoi responsive web design commence à décoller, où les conceptions sont plus fluide et réactive pour l'utilisateur, les paramètres de l'appareil (comme écran résolution.)

Qu'est-ce que le système Grid?

un système de grille est juste un ensemble de noms de classe CSS prédéfinis que vous pouvez utiliser dans vos documents HTML pour aligner les différentes boîtes dans votre conception dans une "grille" qui correspond à une ou plusieurs mises en page communes pour le design web. Un système de grille est bon si vous n'êtes pas familier avec CSS et trouver difficile d'aligner les boîtes (à la fois en largeur et en hauteur) votre conception est composée.

si vous trouvez CSS assez simple pour écrire vous-même, je vous recommande de l'écrire vous-même. Je recommande également de ne pas utiliser des colonnes de largeur strictement fixe, mais plutôt un design web plus réactif (comme mentionné ci-dessus) pour accommoder différentes tailles d'écran mieux qu'un design de largeur fixe est capable de.

960px est utilisé parce qu'il est divisible par 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, et 16... - permettre aux designers d'avoir une grande variété de différentes largeurs de colonnes et de configurations possibles. Il y a probablement d'autres nombres "magiques" à cet égard.

comme nous l'avons également fait remarquer, une largeur de 960px convient à la majorité des résolutions.

un système de grille est utilisé pour aligner les éléments sur les mêmes lignes verticales. Cela donne à votre mise en page un meilleur aspect parce que tous les textes/en-têtes/images sont alignés à gauche de la même façon.

960 est comme les autres ont dit l'un basé sur 12 ou 16 colums parce qu'il peut être dévié par le plus grand nombre de nombres. De cette façon, vous pouvez avoir une rangée de 8 éléments et un de 4 et avoir le même espace entre vos éléments. Si vous regardez le lien vous pouvez voir les marges blanches entre les éléments sont les mêmes lorsque vous faites une mise en page de 2-8-2 ou une mise en page de 4-4-4 cellules(12 col basé)

je pense que la raison de la divisibilité est la raison principale. {2^6 , 3 , 5 } permet de (7*2*2) = 28 facteurs d'échelle en utilisant six deux et les deux plus petits nombres premiers suivants

960px a une énorme quantité de facteurs, ce qui signifie que les mises en page peuvent avoir des valeurs plein pixel, sain avec beaucoup de dimensions différentes.

960px est utilisé parce que le plus commun et est la plus petite résolution d'écran utilisée régulièrement. Vous aurez des appareils mobiles et quelques écrans 800x600, mais il y en a peu entre les deux. L'espace supplémentaire sur le(S) côté (s) de la page permet des bordures de fenêtre et des barres de défilement, tout en n'obscurcissant pas le contenu.

Voici une autre façon de penser sur les grilles. Ce que j'offre ici est une solution de travail pour créer des mises en page précises nécessaires pour l'indépendance de largeur de la conception responsive. Je fais l'hypothèse que toute bonne conception de web devrait être sensible et précise à toutes les tailles d'échelle.

ayant conçu/construit des centaines de pages de renvoi responsive au cours des trois dernières années, j'ai découvert très tôt un problème avec la grille de 960 pixels. Puisque les dessins réactifs utilisent des pourcentages pour les largeurs au lieu de pixels, le nombre 100 devient tout important. Le deuxième aspect important de cette question est d'éviter l'utilisation de la fraction de pourcentages. La dernière partie essentielle est de s'assurer que l'image largeurs sont en proportion exacte du pourcentage qu'ils occupent. Compte tenu de ces trois contraintes, il n'existe qu'une seule grille logique: la grille de 1000 pixels.

avant d'adopter cette approche, nous avons utilisé la grille de 960 pixels avec les pourcentages fractionnels associés pour nos conceptions responsive. En conséquence, nous avons trouvé des résultats différents à partir d'un navigateur à l'autre. La variance est subtile, un pixel de cette façon ou de cette façon, et due à des erreurs d'arrondi. Il y en a qui trouvent que de telles nuances sont un compromis acceptable pour la facilité de diviser des colonnes exactement égales en utilisant des pourcentages fractionnels. Si vous êtes intéressé par une alternative réfléchie, je vous invite à lire la suite.

pour ceux qui sont familiers avec la devise américaine, en particulier le dollar, vous comprenez déjà comment le nombre entier les pourcentages marchent. Vous savez que le dollar peut être divisé en pièces de 1, 5, 10, 25 et 50 cents. Chaque fois que vous devez partager un dollar trois façons dont quelqu'un finira avec le penny supplémentaire. Dans votre mise en page, en utilisant des nombres entiers, cela signifie que trois colonnes pourraient être configurées comme 33%:34%:33%. Vos tailles d'image seraient 330px, 340px & 330px. Les différences de largeur sont virtuellement imperceptibles parce que notre perception est beaucoup plus en accord avec l'alignement des éléments plutôt qu'avec les comparaison des largeurs. La grille de 100% et la grille de 1000 pixels correspondent à un simple rapport de 1: 10. Cette méthode est simple, précise et facile à retenir.

construire vos layouts en utilisant des pourcentages est un gain de temps énorme. Notre conteneur principal obtient un paramètre fixe de largeur de pixel en utilisant une seule classe CSS. Lorsque vous changez la largeur max fixe les échelles de mise en page. Lorsqu'un appareil mobile tel qu'une table ou un téléphone demande votre page, votre mise en page sera dimensionnée en conséquence. Je voudrais cependant limiter l'échelle ascendante ne doit pas être supérieure à 125% pour éviter un adoucissement perceptible des images. Par exemple, notre nouveau port de vue à venir de 1230 pixels s'inscrit dans cette contrainte.

en conclusion, Il est préférable de se rappeler que nous sommes des artisans qui, à notre meilleur, créent de l'art véritable. L'histoire nous fournit de merveilleux exemples analogiques créés avant l'existence des ordinateurs. Nous avons tous vu les belles mosaïques créées avec des morceaux cassés de verre ou de tuile; leur beauté ne vient pas de la machine-couper, de taille égale morceaux, mais plutôt, soigneusement mis en morceaux assemblés par les mains d'un artiste. Les méthodes historiques établies fournissent un aperçu pour résoudre des problèmes similaires trouvés dans la conception de web.