grosor - tamaño de letra en css

¿Cómo hacer el tamaño de la fuente en relación con el div padre?

Question

Quiero que el texto dentro de mi div sea del mismo tamaño en porcentaje de relación a un div principal. IE Quiero que mi texto tenga font-size de font-size del 50% del ancho div de los padres. Entonces, cuando el tamaño de la página está cambiando, el texto siempre permanece en el mismo tamaño en % .

Aquí es de lo que estoy hablando:

.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>

Ejecute este fragmento en pantalla completa e intente cambiar el tamaño de la página y ver cómo el tamaño del texto está cambiando y no se ajusta dentro de los bordes div. ¿Cómo puedo evitar que suceda, para que siempre permanezca dentro de las fronteras?

Answer 1

La forma en que resolví este problema fue usar javascript para medir el contenedor y luego establecer el tamaño de fuente en px en ese contenedor. Una vez que se establece la línea de base para el contenedor, el tamaño de fuente relativo de todo el contenido se escalará correctamente usando em o%.

Estoy usando React:

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

CSS:

div {
  font-size: 2em;
}

Answer 2

Puede usar las unidades de la ventana gráfica para cambiar el tamaño con la ventana. 100vw es el ancho completo de la ventana y 100vh - altura.

.resizable-text {
  font-size: 50vw;
}

<div class="resizable-text">
  Text
</div>

Answer 3

Si habla de escala de respuesta, entonces puede implementarlo, pero todo depende de lo que está tratando de lograr. En el siguiente código, he creado un contenedor div con relación (altura / anchura = 1/2). Cuando cambie el tamaño de la ventana del navegador, el contenedor y el texto se escalarán de manera responsable. Según el tamaño de la ventana, cambiará la fuente según VW (ancho de la ventana gráfica) y VH (altura de la ventana gráfica). Para agregar un nuevo tamaño de fuente, debe configurarlo dos veces una vez de acuerdo con la opción -vw y la segunda vez de acuerdo con -vh. He usado las variables CSS (var), de esta manera es más fácil entender el código.

Ejemplo

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>

Answer 4

Uso font-size: x% no es relativo al ancho del elemento primario, sino al tamaño de fuente que normalmente tendría el elemento.

Entonces, si el elemento primario de su elemento establece font-size: 12px entonces font-size: 50% en el elemento significa que el elemento tiene un font-size de font-size de 6px

Lo que quieres usar es el porcentaje de la ventana gráfica : vw

por ejemplo: font-size: 2vw

.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%; 
 display: inline-block;
 margin-left:40%;
 font-size : 2vw;overflow: hidden;
}

.counter-element-value{
 position:absolute; 
 top:50%; 
 width: 50%;
 max-width:50%;
 display: inline-block;
 height:100%;
 padding-left:30%;
 font-size : 2vw;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>

Answer 5

Tamaño de fuente sensible / Texto sensible según la ventana del navegador : -

El tamaño del texto se puede configurar con una unidad vw, lo que significa el "ancho de la ventana gráfica".

De esa manera, el tamaño del texto seguirá el tamaño de la ventana del navegador:

Por ejemplo

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

Cambia el tamaño de la ventana del navegador para ver cómo se ajusta el tamaño del texto.