28112 sujets

CSS et mise en forme, CSS3

[Résolu] Comment faire pour que le texte adapte sa taille automatiquem

Bonjour j'aimerais savoir si c'est possible que la taille du texte s'adapte automatique a la grandeur de la fenêtre. upload/1496780460-65976-capture.png
Ici on peut voir que les images s'adaptent mais pas le texte
PS: c'est une barre de navigation que je veux mettre et je veux aligne le texte en partent de la perle au lingot d'or
non pas automatiquement et pas uniquement, il faut codé avec les media queries voici un exemple : 

@media screen and (max-width: 640px) {
 a {
             margin-top:50px;
  }
}


ce qui veut dire que toutes les balises <a> auront un margin top 50px quand l'écran sera supérieur à 640px.
En fait tu fais tu définis quelle taille d'écran et pour cette taille tu donnes les caractéristiques que tu souhaites.
Par exemple si tu veux que ton texte fasse 12px pour les écrans de smartphones tu feras quelque chose dans ce genre:

@media screen and (max-width:480px) {
     .tonTexte {
          font-size:12px;
     }
}


En gros les media queries permettent de dire dans ton css, pour telle taille d'écran tu appliques tel style. Mais il faut bien les définir et vérifier la manière dont ta page réagit sur les différentes tailles d'écrans. Tu peux utiliser les inspecteurs sur les navigateurs. Je sais que pour chrome et mozilla ils ont une fonction pour tester le responsive sur ta page.
Modifié par Ttlp (07 Jun 2017 - 10:46)
Meilleure solution
Bonjour,
on peut utiliser l'unité vw pour définir la taille du texte, dans ce cas la taille sera proportionnelle à la largeur de la fenêtre, si j'ai bien compris la question
sachant que la largeur de la fenêtre = 100vw
exemple :

		h1 {
			background:gold;	
			text-align:center;
			font-size:9vw;
			line-height:25vw;
			margin:0;
			padding:0;
		}

Modifié par farang (08 Jun 2017 - 18:51)
Sujet clos
Aller à