Balise h1 adaptative

Bonjour
Sans doute une question "idiote" pour les spécialistes.
J'aimerais trouver un script simple en CSS qui permette d'adapter la taille de la balise h1 à la taille de l'écran.
J'ai trouvé plein de conseils de ce qu'il ne faut pas faire ou de ce qu'il faut faire mais aucun script à appliquer ou alors avec des techniques toutes plus complexes les unes que les autres sans réponse directe à une question qui, pourtant, me paraît, à priori, simple.
J'utilise TEMPLATE CREATOR CK qui est super, et qui adapte très bien les balises mais pour un cas précis, j'ai besoin d'adapter la balise titre article H1 à la taille de l'écran.
Et là, je coince !
J'ai fait plusieurs tentatives mais rien ne fonctionne .
Une âme charitable pourrait-elle me venir en aide ?
Merci mille fois

Salut,

je suppose que tu dois pouvoir utiliser les unités lié au "viewport" pour définir la taille du h1.

h1{font-size: 10vh;}

Ici j'ai utilisé vh pour viewport height , de la même manière il y a vw pour viewport width, et il y a d'autres unités "assez proche" (prefixe d pour dynamique je crois (dvh dvw ?) et et s (dvh svw ?) mais je n'ai pas retenu tous les détails

(je connais pas "template creator ck")

salut, en css
tu peut aussi mettre la taille h1:

h1 {font-size: 1.6rem; }

et une taille plus grande pour les plus grands écrans :

@media screen and (min-width: 1000px) {
h1 {font-size: 1.8rem; }

ou tout mettre + grand :

@media screen and (min-width: 1000px) {
html, body {
font-size: 110%; }

1rem=100%=16px css
Modifié par drphilgood (28 Nov 2024 - 14:05)

Bonjour et tout d'abord merci mille fois pour vos réponses
Je commence à comprendre même si je n'ai pas encore abouti.
En fait, mon problème est l'ajustement aux petits écrans.
Peut-être pouvez-vous me donner un indice supplémentaire ?
Merci d'avance

Bonjour,
tout a été clairement dit par drphilgood.
Il faut maintenant vous familiariser avec les @media, qui permettent effectivement d'adapter les largeurs en fonction de la taille des écrans (pour faire bref). En plus des valeurs fluides décrites plus haut par Mathieuu
À ce stade, personne ne peut rien faire de mieux, hormis réaliser le code de votre site
Vraiment, parce que c'est un bon jour :
Pour les mobiles et à minima pour le css.

<h1>Ma balise de titre</h1>

@media (max-width: 35em) {
h1 {
	font-size:1em;
	margin-left:1em;/Ou center, ou right
	color:#000;
	font-style:italic;}
}

Ne surtout pas oublier la double accolade de fin du css.
Pour les grands écrans, le même principe, mais au-dessus de 35em. Ce peut être aussi une valeur en px pour les @media.
Il est indispensable de travailler les @media pour faire du "responsive". Il y a des centaines de références sur le net.
PS: Certains ici diront que l'on peut faire du "responsive" sans les @media. C'est vrai, mais doucement pour débuter

Raphael a écrit :
Pour te donner une idée, je te laisse jeter un œil à cet excellent outil : https://utopia.fyi/clamp/calculator/

Une tuerie, merci. Je viens de tester. J'ai longtemps résisté à ce type de solution, mais là je ne vois plus de raison pour ne pas les employer. Le point essentiel étant que ça s'intègre très bien à un workflow.
Modifié par Olivier C (30 Nov 2024 - 13:15)

@Olivier pour être plus complet, on s'en sert depuis peu sur un projet via un fichier de config UnoCSS (une sorte de TailwindCSS)… mais en les transformant en variables CSS et en les utilisant en CSS natif.

En pratique ça donne ça :

body {
  background: var(--colors-white);
  color: var(--colors-gray-900);
  font-size: var(--font-size-m);
  line-height: var(--line-height-28);
  font-family: var(--font-family-base);

  [data-theme-preference="darkmode"] & {
    background-color: var(--colors-gray-900);
    color: var(--colors-white);
  }
}

Modifié par Raphael (30 Nov 2024 - 13:34)

Bonjour,

Raphael a écrit :
3- L'usage de la fonction clamp() qui permet très finement de proposer une taille fluide tout en étant bornée par une valeur minimale et maximale. Pour te donner une idée, je te laisse jeter un oeil à cet excellent outil : https://utopia.fyi/clamp/calculator/

Cool !

Amicalement,