web-dev-qa-db-fra.com

Points d'arrêt communs pour les requêtes multimédias sur un site réactif

Je travaille donc sur mon premier site Web réactif qui utilise largement les requêtes des médias. Je me demandais s'il y avait des largeurs de page courantes pour lesquelles je devrais optimiser.

J'aurai probablement une largeur maximale (ne pas aller complètement fluide) Je pense que j'aurai peut-être 3-5 largeurs définies avec des petites transitions CSS3 amusantes entre elles (similaires à la façon dont CSS Tricks fonctionne).

Actuellement, les chiffres que j'utilise 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){...}

De plus, je pense avoir lu que certains appareils mobiles ne se comportent pas comme prévu (avec @media). Où cela entre-t-il en jeu et comment dois-je gérer ces situations?

csscss3mobileresponsive-designmedia-queries
42
Zach Lysobey

Lorsque vous décidez des points d'arrêt pour vos requêtes multimédias, tenez compte de ces réalités:

  • Il existe des centaines de tailles d'écran différentes sur des milliers d'appareils différents.
  • L'avenir apportera de nouvelles tailles d'écran.
  • Apple, Samsung, Microsoft, LG, Nokia et tout autre fabricant d'appareils peuvent, à tout moment, modifier la taille de l'écran de leurs modèles populaires.

Avec autant de possibilités de fenêtres, faire correspondre les points d'arrêt à des appareils spécifiques ne semble pas être une stratégie efficace. Suivre ce qui est populaire, ce qui est nouveau et ce qui a changé sera une tâche sans fin.

Une meilleure approche peut être de définir des points d'arrêt en fonction du contenu et de la mise en page.

Avec cette approche, votre site utilise ses points d'arrêt naturels pour s'adapter à la taille des fenêtres d'affichage tous, plutôt que des points d'arrêt artificiels ciblant les tailles d'écran courantes.

Cette méthode est tellement simple et facile qu'il peut être difficile à croire:

  1. Exécutez votre site Web sur un ordinateur de bureau ou un ordinateur portable.
  2. Lorsque vous rétrécissez la fenêtre du navigateur, notez la réponse du site Web.
  3. Lorsque vous atteignez le point où votre mise en page n'est plus parfaite, c'est votre premier point d'arrêt.
  4. Ajustez votre site pour cette taille d'écran (qui peut n'avoir aucun rapport avec n'importe quel appareil).
  5. Continuez à rétrécir la fenêtre du navigateur.
  6. Lorsque vous rencontrez le problème de mise en page suivant, c'est votre deuxième point d'arrêt.
  7. ... et ainsi de suite et ainsi de suite.

Bien sûr, si vous concevez d'abord sur mobile, le processus va dans le sens inverse: commencez avec un écran étroit et sortez.

Avec les points d'arrêt naturels, vous n'avez plus besoin de vous concentrer sur un univers géant de tailles de fenêtres, car votre site s'adaptera à n'importe quel appareil, maintenant et à l'avenir.

Selon n développeur , cette approche amène les points d'arrêt à leur intention initiale:

Je ne sais pas comment nous avons pu trouver l'expression "points d'arrêt spécifiques à un appareil" de toute façon ... Comme je l'ai compris, le terme "point d'arrêt" a toujours été une référence à l'endroit où le contenu ou la mise en page "cassaient" ( c.-à-d. qu'ils semblent défectueux) et vous devrez donc appliquer une requête média à ce stade. Mais je suppose que ce n'est que de la sémantique, j'ai toujours pensé que c'était du bon sens de faire référence aux points d'arrêt dans le contexte du contenu ou de la mise en page.

~ Louis Lazaris, ImpressiveWebs

source: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-168596745

Plus d'informations (sites externes):

25
Michael_B

De plus, je recommanderais certainement d'utiliser device-width pour les tailles de votre mobile, sauf si vous souhaitez que les utilisateurs voient vos styles de mobile lorsqu'ils redimensionnent la fenêtre de leur navigateur sur un appareil non mobile. width est la largeur de la fenêtre et device-width est la résolution actuelle de l'appareil.

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

Vous avez raison. De nombreux appareils ne vous donneront pas le width ou device-width que vous attendez, en particulier lorsque vous basculez entre paysage et portrait (ils donnent souvent la largeur du paysage en mode portrait). Le zoom automatique de l'appareil peut également jeter une clé dans les choses. L'utilisation de la balise viewport meta tag peut aider à résoudre bon nombre de ces problèmes. (Plus d'informations ici)

43
Drew Gaynor

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, selon le cas (min-largeur sans max-largeur ou max-largeur sans min-largeur), mais c'est ma configuration de base.

Personnellement, je n'ai jamais compris les largeurs impaires que beaucoup de gens utilisent. Par exemple, 20 et plus a cinq incréments de requête multimédia CSS3: 480, 600, 768, 992 et 1382px.

Cela n'a aucun sens pour moi. Les ruptures logiques sont à des intervalles de 320 pixels (320, 640, 960, 1280, 1600, 1920). Notez que ces pauses peuvent donner une disposition légèrement différente pour à peu près n'importe quel appareil dans l'une ou l'autre orientation (omnia est 240x400, iphone est 320x480, droid x est 480x858, ipad est 768x1024, galaxy s3 est 720x1280, et ils parlent de tablettes 1920x1080).

JJ

21
doubleJ

quelques résolutions à rechercher:

écran d'iphone (beaucoup d'autres smartphones ont des tailles d'écran similaires: résolution de 960 x 640 pixels à 326 ppp http://www.Apple.com/iphone/specs.html

écran d'ipad (beaucoup d'autres tablettes ont des tailles d'écran similaires à une résolution de 1024 x 768 pixels à 132 pixels par pouce (ppp) http://www.Apple.com/ipad/specs/

écran "normal" de nombreux écrans normaux ont également une résolution de 1024 x 768 pixels, selon: http://www.w3schools.com/browsers/browsers_display.asp mais je suis ne se porte pas garant de leur fiabilité.

Je cherche plus de données maintenant.

1
bigblind