1485 sujets

Web Mobile et responsive web design

Bonjour,

je débute avec les media queries et, comme beaucoup, je patauge un peu au niveau des tailles d'écrans et breakpoints.

J'ai vu sur, l'article consacré aux media queries, que le gagnant du concours Alsacréations avait 3 tailles d'écrans: 1280px, 800px et 340px (sauf erreur de ma part)

J'utilise principalement Google Chrome, et j'ai installé l'application Web Developper pour visualiser mon site sous plusieurs affichage différents.
Web Developper propose les vues suivantes (uniquement largeurs): 320px, 480px, 600px, 800px, 768px, 1024px

Pensez-vous qu'il soit utile d'avoir autant de breakpoints définis? Smiley sweatdrop

Quelles largeurs avez-vous choisies pour vos sites?

Merci d'avance!
Salut,

Les points de rupture dépendent de plusieurs facteurs, à commencer par la manière dont les pages Web sont mises en forme. Si les blocs sont mis en forme de façon extrêmement fluide (dimensions, marges et espacement horizontaux définis en pourcentage ou en em, et non en pixels), il ne sera pas toujours nécessaire de multiplier les points de rupture.

À noter que les points de rupture peuvent ne pas coïncider avec les tailles d'écran.

Bref, il est difficile de répondre à ta question de façon tranchée sans connaître le contexte.
+1 pour Victor BRITO

En effet, l'usage d'unités relatives et de blocs laissés dans le flux (ou en float) réduit beaucoup les cas de débordement de page, me semble-t-il.

En outre, les contenus textuels subissent généralement très bien le resize.

Enfin, un petit "truc" pour réduire les cas de débordement pour les images :

img { max-width: 100%; }
Muchos a écrit :
Enfin, un petit "truc" pour réduire les cas de débordement pour les images :

img { max-width: 100%; }

Auquel il vaut mieux ajouter height: auto pour s'assurer du maintien des proportions.