28172 sujets

CSS et mise en forme, CSS3

[Résolu] Texte responsive

Bonjour, comment faire pour rendre responsive un texte.

Quand je diminue la taille de ma page, le texte ne diminue pas.

j'ai même un texte qui ce place sous la div dans la qu'elle il est censé être.

merci de vôtre aide ! 
 <body id="bodyacceuil">
    	<header>
    		<section id="menudéroulant">
    			<div id="container">
    				<div id="boxdéroulant1">
    					<p>Logo</p>
    					<b>Menu</b>
    				</div>
    			</div>
    		</section>
    		<section id="cadretitre">
    			<div id="cadreparagraphe">
    				<h1>Fleures de villes</h1>
    			</div>
    		</section>
    		<section id="connexion">
    			<nav id="ongletconnexion">
    				<a href="#">Créer un compte</a>
    				<a href="#">Connexion</a>
    				<a href="#">Mot de de passe oublié </a>
    			</nav>	
    		</section>
    	</header>


header{
	background-color: orange;
	height: 9vh;
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: fixed;
	font-family: 'Dancing Script', cursive;
	font-size: 3vh;

}



#menudéroulant{
	background-color: blue;
	width: 30%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

#container{
	background-color: green;
	width: 40%;	
	height: 100%;
	display: flex;
	flex-direction: column-reverse;
}

#boxdéroulant1{
	background-color: purple;
	width: 100%;
	height: 40%;
}



#cadretitre{
	background-color: red;
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content:space-around;
}

#cadreparagraphe{
	background-color: navy;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	font-size: 4vh;
	height: 50%;
	width: 100%;
	font-family: 'Parisienne', cursive;

}



#connexion{
	background-color: tomato;
	width: 30%;
	display: flex;
	flex-direction: column-reverse;
}

#ongletconnexion{
	background-color: yellow;
	display: flex;
	justify-content: space-around;
}

/* le style pour le footer en commun */

/* le style pour accueil.html */
#bodyacceuil{
	margin: 0;
	padding: 0;
	background-color: teal;
	display: flex;
	flex-direction: column;
}
Modérateur
Salut,

Si tu veux que la taille du texte soit fluide et varie selon la taille de l'écran tu peux lui donner un taille relative par rapport à la largeur par exemple :
.text {
  font-size: 10vw;
}

https://jsfiddle.net/undless/814aojzg/

Ou mieux (ouais parce qu'une taille qui bouge tout le temps c'est pas ouf), utiliser les média queries pour refixer la taille du texte pour différentes résolutions :
@media (max-width: 600px) {
  .text {
    font-size: 1.2em;
  }
}
Meilleure solution
Où tu peux également utiliser la fonction clamp qui a mon sens est vraiment top

Font-size : clamp(16px, 3vw, 48px);

Explication : la première valeur(16px) correspondra à la valeur minimale de ton texte
La deuxième valeur 3vw correspondRa à la valeur idéal souhaité
La dernière valeur 48px correspondra à la valeur maximale

Ainsi plus besoin d utiliser les médias query????
Sujet clos
Aller à