web-dev-qa-db-fra.com

Quelle est la bonne taille d'image native à utiliser pour un curseur de largeur totale (100% du navigateur)?

Je construis un site Web qui comprend un curseur pleine largeur; 100% of fenêtre du navigateur... Le CSS serait comme ceci

.slider {
width:100%;
}

... où le parent du curseur est <body>, pas un div diviseur.

Mon dilemme est que si j'utilise une image de largeur 1600px, et la redimensionne à 100% à l'aide de CSS, cette opération conviendra à toute personne dont le navigateur agrandi est (largeur du moniteur) inférieur à 1600px car l'image sera réduite et non réduite (en laissant pour le moment les considérations relatives à la taille des périphériques mobiles/réactives) cependant, si vous utilisez un navigateur agrandi sur un très grand moniteur, l'image sera agrandie à la baisse, ce qui lui donnera un aspect légèrement dégradé.

J'ai vérifié quelques curseurs et ils utilisent des largeurs d'image d'environ 2 000 px, mais existe-t-il une largeur qui n'aurait pas besoin d'être mise à l'échelle sur un pourcentage élevé de moniteurs?

_ {Remarque} _: Je suis pas à poser des questions sur les CSS, un système de grille, Twitter boost, un site adaptatif ou adaptatif, un site Web d'une largeur de 960px ou quelque chose du genre. Je ne parle pas non plus d'un curseur qui représente 100% du wrapper de site Web. Je pose simplement la question de la largeur en pixels du fichier image utilisé pour créer un curseur qui est mis à l'échelle à 100% de la largeur du navigateur.

23
byronyasgur

1920px est la plus haute que vous voulez aller. Cela est considéré comme le "haut de gamme" pour les tailles de résolution d'écran, et tout ce qui est plus élevé incitera les navigateurs à agir. Tant que vous définissez la largeur de la diapositive à 100%, la résolution de l'écran sera supérieure à celle de 1920 sans problème. Cela résoudra également le problème de la consommation de bande passante excessive et n'affectera pas votre temps de chargement (qui est essentiel pour les fonctionnalités de votre site).

22
Jeff

Selon les statistiques globales des résolutions d'écran de l'année 2013, la taille d'affichage de 1920x1080 est la quatrième parmi les 10 tailles d'écran les plus courantes. Celui-ci est également le dernier affichage haute définition pour les moniteurs jusqu'à présent. 

1
Lightcoder

Je pense que c'est plus un choix personnel, en fonction de votre public cible. Ces statistiques pourraient vous aider à prendre une décision éclairée. http://www.w3schools.com/browsers/browsers_display.asp

1
H.Saraf

960px est la largeur standard standard pour toute zone de contenu d'une page Web afin d'éviter tout débordement dans une fenêtre de navigateur complète.

http://960.gs/

1
JROB

Comme déjà noté ci-dessus, la largeur standard est de 960 pixels . Mais de nombreux sites font de l'adaptatif, vous ne pouvez donc pas dire avec certitude . Mon moniteur, par exemple, a une résolution de 2560x1440. Personne ne fait une résolution de site aussi grande.

Si vous souhaitez créer un site adaptatif en tant que moniteur et périphérique mobile, je ne peux que vous conseiller d’utiliser le bootstrap de Twitter ou quelque chose de similaire. Vous pouvez également utiliser un système de grille, par exemple: designinfluences

0
Xella