Points de rupture communs pour les requêtes des médias sur un site réactif

je travaille donc sur mon premier site web responsive qui utilise largement les requêtes des médias. Je me demandais s'il y avait des largeurs de page communes que je devrais optimiser.

<!-Je vais probablement avoir une largeur maximale (pas aller plein fluide) je pense que je vais avoir peut-être 3-5 largeurs réglées avec des petites transitions CSS3 amusantes entre eux (similaire à comment astuces CSS fonctionne).

actuellement, les chiffres que j'utilise sont quelque peu arbitraire:

@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){...}

en outre, je pense que j'ai 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?

39
demandé sur Michael_B 2011-12-19 21:00:50

4 réponses

lorsque vous décidez des points de rupture pour vos requêtes mé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, changer la taille de l'écran de leurs modèles populaires.

avec autant de possibilités de viewport, les appareils spécifiques ne semblent pas être une stratégie efficace. Il suffit de suivre ce qui est populaire, ce qui est nouveau, et ce qui a changé sera une tâche sans fin.

il serait peut-être préférable d'établir des seuils en fonction du contenu et de la mise en page.

avec cette approche, votre site utilise ses points de rupture naturels pour s'adapter à les tailles de champ de vision, plutôt que les points d'arrêt artificiels ciblant actuellement les tailles d'écran courantes.

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

  1. Exécuter votre site web sur un ordinateur de bureau ou ordinateur portable.
  2. lorsque vous rétrécissez la fenêtre du navigateur, remarquez comment le site web réagit.
  3. lorsque vous atteignez le point où votre disposition n'est plus parfaite, c'est votre premier point de rupture.
  4. Ajustez votre site pour cette taille d'écran (qui peut n'avoir aucun rapport avec un périphérique).
  5. continuez à rétrécir la fenêtre du navigateur.
  6. quand vous frappez le prochain disposition problème, c'est votre deuxième point d'arrêt.
  7. ... et ainsi de suite et ainsi de suite.

bien sûr, si vous concevez mobile-d'abord, puis le processus va à l'inverse: commencer par un écran étroit et travailler votre chemin de sortie.

avec les points de rupture naturels, vous n'avez plus besoin de vous concentrer sur un univers géant de tailles de viewport parce que votre site s'adaptera à n'importe quel appareil, à la fois maintenant et dans le futur.

Selon développeur, cette approche apporte des points d'arrêt de cercle complet de leur but initial:

Je ne suis pas sûr de savoir comment nous sommes arrivés à la phrase " spécifique à l'appareil breakpoints " de toute façon... Comme je l'ai compris, le terme "point d'arrêt" était toujours une référence à l'endroit où le contenu ou la mise en page" (i.e. semblent défectueux) et donc vous auriez besoin d'appliquer une requête média à de ce point. Mais je suppose que c'est juste de la sémantique, j'ai toujours pensé il était courant sens pour se référer à des points de rupture dans le contexte du contenu ou de mise en page.

~ Louis Lazaris,ImpressiveWebs

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

Plus d'informations (sites externes):

18
répondu Michael_B 2016-08-18 14:25:32

en outre, je recommande vivement device-width pour vos tailles de mobile, sauf si vous voulez que les utilisateurs voient vos styles de mobile quand ils redimensionnent leur fenêtre de navigateur sur un appareil non-mobile. width est le la largeur de la fenêtre d'affichage, et device-width est la résolution actuelle de l'appareil.

en outre, je pense que j'ai lu que certains appareils mobiles ne se comportent pas comme prévu (avec @media).

Vous avez raison. Beaucoup d'appareils ne vous donneront pas le width ou device-width ce que vous attendez, surtout lorsque vous passez d'un paysage à un portrait (ils donnent souvent la largeur du paysage lorsqu'il est en portrait). L'auto-zoomage d'un dispositif peut également jeter une clé dans les choses. Utiliser fenêtre d'affichage de la balise meta peut aider avec beaucoup de ces questions. (Plus d'infos à ce sujet ici)

42
répondu Drew Gaynor 2011-12-19 17:31:31

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, comme approprié (min-width sans max-width ou max-width sans min-width), mais c'est ma configuration de base.

Personnellement, je n'ai jamais compris l'étrange largeurs que beaucoup de gens utilisent. Par exemple, 320 et plus a cinq incréments de requête multimédia CSS3: 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'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 comprimés 1920x1080).

JJ

21
répondu doubleJ 2012-06-30 16:17:11

certaines résolutions chercher:

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

écran ipad (beaucoup d'autres comprimés ont des tailles d'écran similaires 1024 par 768 pixels à 132 pixels par pouce (ppi) http://www.apple.com/ipad/specs/

http://www.w3schools.com/browsers/browsers_display.asp mais je ne me porte pas garant de leur de sa fiabilité.

je cherche plus de données maintenant.

1
répondu bigblind 2011-12-19 17:17:57