Bonnes largeurs pour les requêtes des médias sur un site réactif

Question

Donc, je suis en train de travailler sur mon premier "responsive" site web qui fait un large usage des media queries. Je me demandais si il y en a des pages communes-largeurs je dois optimiser pour.

Je vais probablement avoir une largeur maximale (pas de passer en liquide) je pense que je vais avoir peut-être 3-5 définir les largeurs avec peu de fun css3 transitions entre eux (de la même manière http://css-tricks.com les travaux).

Actuellement les chiffres, je suis en utilisant sont quelque peu arbitraires:

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

Existe-il des ressources là-bas avec les recommandations (ou des tutoriels)? Aussi, je crois avoir lu que certains appareils mobiles ne se comportent pas comme prévu (avec @media). Où est-ce, et comment dois-je faire face à ces situations.

Answer 1

• C'est un joli guide utile pour les écrans mobiles.
• Excellent guide pour les stats sur les résolutions d'écran
• Les données Google Analytics sur les résolutions peuvent être de précieux ainsi, si vous avez accès.

Aussi, je recommanderais certainement à l'aide de device-width pour votre mobile tailles, sauf si vous souhaitez que les utilisateurs voient votre mobile styles quand ils redimensionner la fenêtre de son navigateur sur un périphérique non mobile. width est la largeur de la fenêtre d'affichage, et device-width est la résolution actuelle de l'appareil.

Aussi, je crois avoir lu que certains appareils mobiles ne se comportent pas comme prévu (avec @media).

Vous êtes correct. De nombreux périphériques ne vous donnera pas l' width ou device-width que vous attendez, en particulier lors de la commutation entre paysage et portrait (ils se donnent souvent le paysage largeur en mode portrait). Automatique de l'appareil-zoom peuvent aussi jeter une clé dans les choses. À l'aide de la fenêtre d'affichage de la balise meta peut aider à la plupart de ces questions. (Plus d'infos à ce sujet ici)

Answer 2

C'est ce que j'utilise...

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

Il y a toutes sortes d'autres là-dedans, comme approprié (min-width sans max-width et max-width sans min-width), mais c'est ma base de l'installation.

Personnellement, je n'ai jamais compris l'étrange largeurs que beaucoup de gens utilisent. Par exemple, 320 et jusqu' a Cinq CSS3 Media Query incréments: 480, 600, 768, 992 et 1382px.

Ça n'a aucun sens pour moi. Logique pauses à intervalles de 320px (320, 640, 960, 1280, 1600, 1920). Notez que ces pauses peuvent donner une mise en page légèrement différente pour à peu près n'importe quel appareil dans l'un des sens (omnia est 240x400, l'iphone est en 320x480, droid x est 480x858, l'ipad est 768x1024, le galaxy s3 est 720x1280, et ils parlent de 1920x1080 comprimés).

JJ

Answer 3

quelques résolutions à observer:

écran de l'iphone (beaucoup d'autres smartphones ont les mêmes tailles d'écran: 960 x 640 pixels à 326 ppp http://www.apple.com/iphone/specs.html

l'écran de l'ipad (beaucoup d'autres tablettes ont les mêmes tailles d'écran 1024 par 768 pixels à 132 pixels par pouce (ppi) http://www.apple.com/ipad/specs/

'normal' écran beaucoup de la normale écrans ont une résolution de 1024 par 768 pixels de résolution, en fonction de: http://www.w3schools.com/browsers/browsers_display.asp mais je ne suis pas etre le garant de leur de sa fiabilité.

Je suis à la recherche pour plus de données maintenant.