Site Responsive

Bonjour, j'ai démarré un nouveau projet et je me met à jour sur certaines techniques CSS.

Je suis en train de lire le livre de Raphaël sur les Flexbox et il est écris ceci :

Dans les milieux autorisés, le Holy Grail (le Saint-Graal) désigne un gabarit d’affichage extrê- mement fluide, introduit en 2006 par un article de référence de A List Apart (http:// alistapart.com/article/holygrail) et dont voici les caractéristiques fondamentales :
• la partie centrale doit être fluide et les parties latérales de largeur fixe ;
• la colonne centrale doit apparaître en premier dans le code HTML ;
• toutes les colonnes doivent avoir la même hauteur, quel que soit leur contenu ; • le pied doit être collé au bas de page même s’il y a peu de contenu dans la page ; • les codes HTML et CSS doivent être minimaux.

Je vais partir sur ce concept (TP6).

Ma question porte sur le font-size. Un collègue me dit qu'il faut que la police soit responsive aujourd'hui. Ok, c'est logique mais quels paramètres utilisez-vous ?

1/ Déjà pour le menu, si on respecte le paragraphe du livre le menu doit être de taille fixe, j'imagine donc une taille de police à 16px ?
2/ Pour le corps central, utilisez-vous du coup la valeur vh (ou vw) ? Le problème de ça c'est que sur petit écran le texte devient illisible, dans ce cas faut-il faire appel aux media-queries ?

Voilà, n'hésitez pas à me répondre en détails

Bonne journée et merci.

Bonjour,

Pour le font-size, tu peut t'inspirer de ceci : https://developer.mozilla.org/fr/docs/Web/CSS/calc#Accessibilit%C3%A9

Cdt

Du coup on met toujours une valeur de base dans le body pour obtenir les 16px dans le site et en fonction des titres comme avec ton lien on ajoute une valeur relative ?

oui, l'idée est d'utiliser une valeur relative qui maintiendras une taille minimale à la font pour qu'elle reste lisible , dans l'exemple sur mozilla.org, la taille de police ne pourras pas être inférieur a 1.5rem ... si en théorie la largeur de la page tombe à 0 .

à toi de choisir une valeur minimale relative, à laquelle tu ajoutes une fraction de la largeur de page (vw), afin d'avoir un compromis entre une police qui ne réduit pas trop et qui ne grandit pas trop non plus.

Cdt

Avec Angular, je suis en train de mettre en place le Holy Graal (texte du livre ci-dessus) et mon body prend effectivement 100% de la hauteur (avec le min-with: 100vh).

Par contre le contenu, c'est à dire le main avec la section prenne quelques 100px et ne remplisse donc pas l'écran. Quelqu'un aurait-il une idée du pourquoi ?

Sur codepen ça fonctionne, pas sur mon projet.

Merci.

EDIT : Ah, c'est ok, au lieu de body il faut cibler app-root.
Modifié par MagicCarpet (15 Apr 2020 - 18:45)