[Résolu] Construction des pages HTML

Bonjour à tous/toutes,

Je suis débutant en HTML/CSS et je me perd un peu sur ce qu'il faut utiliser pour construire une page web qui soit "responsive", c'est à dire qui s'adapte bien quel que soit la résolution de l'écran et sur mobile/tablette.

Beaucoup utilisent FLEXBOX ou GRID, est-ce correct ?

Et quid des dimensions de la page, forcez-vous en PIXELS ou est-ce mieux de travailler sur des % ou encore des EM ...?

Voilà je suis un peu perdu et souhaiterais utiliser les "bonnes pratiques" dès le départ !!!

Merci pour vos réponses !!

Bonjour,

il n'y a pas ou peu en CSS de "c'est comme ça qu'il faut faire". La réponse est toujours "ça dépend", au point que c'est lourd de toujours vouloir répondre ça ou de l'entendre

- si on veut "pousser" le pied de page en bas de la fenêtre du navigateur même quand il n'y a pas assez de contenu pour avoir un ascenseur vertical alors il n'y a pas 50 techniques. Mais es-ce qu'on veut vraiment ça
- est-ce que le/la graphiste ou le design utilisent une grille et alignent les éléments, blocs, composants dessus ? Si oui CSS Grid Layout est probablement une bonne piste. Même sans grille mais des blocs alignés les uns par rapport aux autres, ça reste une bonne piste (les tracks ne font pas forcément tous la même largeur, Grid est capable de bien bien bien plus de souplesse. Mais y a des "colonnes" et des "lignes" quand même)
- est-ce que les blocs ont une largeur variaaaable (en fonction du contenu et/ou de la résolution). Là, Flexbox…
- float non, bienvenue en 2020. Le clearfix c'est une technique de ouf mais on en a plus besoin, adieu
- position: absolute pour de la mise en page NON

Les dimensions de la page c'est euh 100% et je change rien.
Si c'est des points de rupture dont il s'agit : en PIXELS car d'autres unités posent problème dans des cas bien particuliers. Voir d'anciens articles de https://fvsch.com si besoin de creuser mais c'est pas destiné aux débutants je crois.
Si c'est d'une largeur de colonne de contenu que l'on centre : bah pixel comme de toute façon la Media Query est déjà en pixels… J'ai gardé la technique de mon ancienne collègue .page-wrapper { max-width: 1400px; margin: 0 auto; }.

Ensuite après la mise en page, il y a la typographie : notre bonne pratique concernant font-size c'est en REM, PAS en pixel. EM dans 1% des cas mais c'est une unité tout aussi relative que REM. Pourcentage si on a envie de s'embêter mais c'est pareil qu'EM. Le dernier arrivé REM a tous les avantages d'EM sans les inconvénients, utilisable depuis IE9 donc pas de souci depuis des années.
Pour les marges, padding mmh je crois que j'utilise des rem mais c'est pas super important.

Salut,

Même si je ne les ai pas tellement utilisé, pour le css j'aime bien aussi les vw et vh qui sont liés à la taille de la "zone d'affichage" (il y en a d'autres qui vont avec, vi vb vmin vmax mais j'ai encore moins utilisé )

Globalement un site à une largeur fixe pour les grandes résolutions et est fluide sur les plus petites résolutions. Ceci car tu veux limiter la largeur pour éviter d'avoir des images / textes qui s'étirent à l'infini sur les grandes résolutions et a contrario sur mobile tu veux utiliser tout l'espace disponible.

Tout les éléments à l'intérieur de la page doivent rester fluide donc pour les éléments de type block tu ne mets soit aucune valeur (ceci car les block occupent toute la largeur de l'écran par défaut) soit une valeur en pourcentage si celui-ci doit faire la moitié ou un tiers de l'écran.

C'est pour ça que les grilles sont très pratique même quasi indispensable je dirai aujourd'hui :
https://getbootstrap.com/docs/4.0/layout/grid/

Après comme l'a dit Felipe, c'est vraiment du cas par cas pour déterminer ce qui avoir une taille fixe ou non sachant quand même que les éléments sont fluides par défaut donc moins on contraint et plus les éléments vont s'adapter naturellement à la largeur de l'écran.

Et exact Mathieuu. Il y a vraiment beaucoup de techniques en css et pas d'autre choix que les expérimenter/apprendre.

Et bien c'est exactement les réponses que j'attendais pour "m'aiguiller" !!!

Encore merci à tous !!! Vous êtes au TOP !!!