web-dev-qa-db-fra.com

Comment faire la taille de police par rapport à div div?

Je veux que le texte à l'intérieur de mon div reste de la même taille avec un pourcentage de % par rapport à un div parent. C'EST À DIRE. Je veux que mon texte ait font-size de 50% de largeur div des parents. Ainsi, lorsque la taille de la page change, le texte conserve toujours la même taille dans %.

Voici ce dont je parle:

.counter-holder{
	display: block;
	position: absolute;
	width:90%;
	height:20%;
	top: 70%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
}


.counter-element-box{
	position:relative;
	vertical-align: text-top;
	border-style: solid;
    border-width: 1px;
    width: 20%;
    height: 100%;
    float:left;
    margin: 6%;
}

.counter-element-text{
	position:absolute; 
	top:50%; 
	width: 50%;
	max-width:50%;
	display: inline-block;
	height:100%;
	margin-left:50%;
	font-size : 80%;overflow: hidden;
}

.counter-element-value{
	position:absolute; 
	top:50%; 
	width: 50%;
	max-width:50%;
	display: inline-block;
	height:100%;
	padding-left:30%;
	font-size : 80%;overflow: hidden;
}
<div class="counter-holder">
	<div class="counter-element-box">
		<div id="years" class="counter-element-value">
			0
		</div>
		<div class="counter-text counter-element-text" >
		    Years
		</div> 
	</div>
	<div class="counter-element-box">
		<div id="missions" class="counter-element-value">
			0  
		</div>
		<div class="counter-text counter-element-text" >
		    Missions
		</div>
	</div> 
	<div class="counter-element-box">	
		  <div id="team" class="counter-element-value">
			   0 
		  </div>
		  <div class="counter-text counter-element-text" >
		    	Team
		  </div>
	</div>		    	
</div>

Exécutez cet extrait en plein écran et essayez de redimensionner la page pour voir comment la taille du texte change et ne s'adapte pas aux limites de la division. Comment puis-je empêcher que cela se produise, afin qu'il reste toujours à l'intérieur des frontières?

cssfont-size
18
Tachi

J'ai résolu ce problème en utilisant javascript pour mesurer le conteneur, puis définir la taille de la police en px sur ce conteneur. Une fois que cette référence est définie pour le conteneur, la taille de police relative de tout le contenu sera mise à l'échelle correctement à l'aide de em ou%.

J'utilise React:

<div style={{ fontSize: width / 12 }} >
  ...
</div>

CSS:

div {
  font-size: 2em;
}
3
JamieR

Si vous parlez de la mise à l'échelle réactive, vous pouvez l'implémenter, mais tout dépend de ce que vous essayez d'atteindre. Dans le code ci-dessous, j'ai créé un conteneur div avec ratio (hauteur/largeur = 1/2). Lorsque vous modifiez la taille de la fenêtre du navigateur, le conteneur et le texte sont redimensionnés en conséquence. Selon la taille de la fenêtre, la police est modifiée en fonction de VW (largeur de la fenêtre) et de VH (hauteur de la fenêtre). Pour ajouter une nouvelle taille de police, vous devez la définir deux fois en fonction de l'option -vw et une seconde en fonction de -vh. J'ai utilisé des variables CSS (var), ainsi il est plus facile de comprendre le code. 

Exemple 

body {
    background-color: #000;
    padding: 0;
    margin:0;
}

/* position element in the middle */
.middle {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 


/* Ratio: height/width */ 
:root {
    --ratio: 0.5;
    --reverse-ratio: 2;
    --container-width: 50vw;
    --container-height: 50vh;

    --font1-sizeVW: 15vh;
    --font1-sizeVH: calc(var(--ratio) * 15vw);

    --font2-sizeVW: 6vh;
    --font2-sizeVH: calc(var(--ratio) * 6vw);
}

#container {

    background-color: pink;
    width: var(--container-width);
    height: calc(var(--ratio) * var(--container-width));

    max-width: calc(var(--reverse-ratio) * var(--container-height));  
    max-height: var(--container-height);
}

#span1 {
    font-size: var(--font1-sizeVW);   
}

#span2 {
    font-size: var(--font2-sizeVW);  
}

/* max-width: (reversRatio * 100vh) */
@media all and (max-width: 200vh) {  

    #container {
        background-color: green;
    }

    #span1 {  
        font-size: var(--font1-sizeVH); 
    } 

    #span2 {  
        font-size: var(--font2-sizeVH);
    } 
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    </style>
</head>
<body>
    <div id="container" class="middle">
        <span id="span1">Hello</span>
        <span id="span2">Hello again</span>
    </div>
</body>
</html>

1
slaviboy

Taille de la police réactif/Texte sensible en fonction de la fenêtre du navigateur : -

La taille du texte peut être définie avec une unité vw, ce qui signifie "largeur de la fenêtre".

De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur:

Par exemple 

<div>
<h2 style="font-size:10vw;">Ganesh Pandey</h2>
</div>

Redimensionnez la fenêtre du navigateur pour voir comment la taille du texte varie.

0
Ganesh Pandey