[Résolu] Page web avec des vignettes + responsive (CSS HTML PHP)

Bonjour.

Je souhaite faire une page qui affiche des vignettes. (des petites images avec un texte dessous), un peu à la façon d'un site d'ecommerce qui propose des photos miniature de produits avec le nom du produit dessous.

Je veux que la page soit consultable sur divers supports : ordi, tablette et mobile.

Donc sur les écrans larges, une série de colonnes/lignes de vignettes (avec bien sur des espacements entre les éléments, que tout soit bien aligné et rangé ...)


xxxx
xxxx
xxx


Et sur mobile une seule colonne :


x
x
x
x
x


Comment gérer cela?

A priori me venait l'idée d'un tableau HTML, avec des dimensions de cellules précises ; récupérer la résolution écran avec un javascript, et en php adapter le nombre de colonnes.

Or, j'ai cru comprendre que les règles de l'art voulaient que la prise en charge des différents formats d'écran se fassent dans le fichier CSS avec les mediaqueries.

Pouvez vous m'expliquer ce qui est le plus adapté pour gérer un tel cas?

Merci d'avance

Bonjour et bienvenue sur le forum

Et bien c'est assez simple à gérer : au choix, tu peux utiliser l'affichage inline-block pour faire apparaître tes blocs les uns à côté des autres, ou préférer un bon vieux flottant à gauche (float : left).

Dans les deux cas, si leur conteneur rétrécis avec le viewport, l'affichage passera automatiquement de (par exemple) 4 à 3, 2 puis une colonne.

Donc surtout pas de tableau de présentation, ni de JS et encore moins de PHP
Un site responsive doit principalement être négocié à l'aide de media queries CSS
Modifié par audrasjb (10 Sep 2014 - 10:34)

Bonjour.

permac a écrit :
A priori me venait l'idée d'un tableau HTML[...]

Alors non, non, non

permac a écrit :
Or, j'ai cru comprendre que les règles de l'art voulaient que la prise en charge des différents formats d'écran se fassent dans le fichier CSS avec les mediaqueries.

Mais oui, oui, oui...

En fait selon ton besoin, tu pourrais même pouvoir gérér ta demande avec un simple "float:left;", mais tout dépendra de ta construction, de ton besoin, du nombre de tes images, de la taille de tes images (est-ce qu'elles auront toutes la même taille)...

Sinon pour les Mediaqueries, c'est par ici

Héhéhé… grilled à quelques secondes près, SolidSnake
Modifié par audrasjb (10 Sep 2014 - 10:36)

Merci pour votre aide, j'ai préféré demander...