Responsive design CSS

Fermé
Gu1ll4um3111 Messages postés 1 Date d'inscription dimanche 12 avril 2020 Statut Membre Dernière intervention 12 avril 2020 - 12 avril 2020 à 20:35
 Pangolino - 13 avril 2020 à 04:25
Bonjour à tous ;)

Je suis étudiant en design graphique et pour un projet je dois monter un site web. J'utilise Sublime text et j'ai des petites notions de codes (très petites ahah). Cependant je suis confronté à un problème:
J'aimerai adapté ma page d'acceuil (portfolio) à tous les différentes dimensions d'écran de PC/MAC.

Sur mon pc 15" d'une résolution de 1920px voila ce que ça m'affiche :


C'est le résultat que je recherche puisque je l'ai codé sur mon PC.

Mais quand je vais sur le pc de mon père (11" et jsp combien de px), voila ce que ça m'affiche :


Du coup, la page beug car elle n'arrive pas à s'adapter à la dimension d'affichage du PC de mon père. Pour cela je sais qu'il existe le responsive design. J'ai fait des recherches mais je ne trouve pas la partie du code qui pourrait m'aider à garder les proportions en fonction de la résolution de l'écran, c'est à dire deux lignes de 3 colonnes ou deux lignes de trois images.
Je ne suis pas intéressé pour le moment de l'adapter à un format smartphone.

Quel code dois-je rentrer pour garder la proportion de mes lignes/colonnes (div) en fonction de la résolution d'un écran ?

Un grand merci d'avance l'équipe ;)

1 réponse

Salut,
vous pouvez commencer par donner des dimensions en pourcentage et absolument évitez toute dimension absolue(pixels, points à remplacer par % et em entre autres).
Ensuite il y a les media queries (CSS) qui permettent de faire plusieurs mise sen pages selon des critères comme des tailles limites.

"Je ne suis pas intéressé pour le moment de l'adapter à un format smartphone."
Ah pourtant les sites sont le plus souvent regardé sur des smartphones , vous vous privez donc de la majorité des visiteurs du web.
En plus ça rends le référencement auprès de Google moindre puisque Google privilégie les sites mobiles first(affichage pour mobile en premier) justement pour privilégier le plus d'utilisateurs.

"Sur mon pc 15" d'une résolution de 1920px voila ce que ça m'affiche : "
Surtout pas faire une mise en page en fonction de votre écran ou de celui de papa, il faut faire une mise en page pour tout le monde. Donc éviter et supprimer toute dimension fixe qui ne peut pas s'adapter à tout les écrans. Il y a des résolutions plus grande que la votre, des plus petites, des gens qui veulent regarder leur site Internet en mode fenêtré dans un navigateur qui est réduit à la moitié de l'écran et bien sûr les appareils mobiles et tablettes qui ont des affichages(résolution) plus petit et pas toujours en mode paysage(rectangle où la hauteur est plus petite que la longueur).
Comme vous le dites ce que vous faites s'appelle un bug puisque l'utilisateur(la plupart c'est à dire ceux qui n'ont pas la même résolution d'écran que vous) ne peut pas voir correctement une page.

Quelques pistes par là:

https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html
je vous laisse chercher par vous-même des exemples de code qu'il faudra pratiquer un peu pour comprendre.

Et les enjeux et priorités pour tout les sites qui vont bien au delà du design (et font la différence entre un site de qualité et un qui ne l'est pas):

https://www.w3.org/WAI/
0