¿Puede el tamaño de fuente ser un% del tamaño del contenedor en css/css3?

que tienen un contenedor:¿Puede el tamaño de fuente ser un% del tamaño del contenedor en css/css3?

<div id="container"><h1>LONG TITLE LINE</h1></div>

y CSS:

#container { 
    width: 50%; 
    height: 50%; 
} 

#container h1 { 
    font-size: XXXXXX; 
}

"XXXXXX" < - donde quiero el tamaño de fuente que se basa en el ancho de la página/contenedor.

pregunta: ¿es posible tener el tamaño de fuente de la h1 basado en el ancho de la página? en css3? Estoy seguro de que se puede hacer usando JS, pero me gusta evitar eso si es posible.

Fuente

2012-01-26 circusdei

no creo que es posible en CSS, pero esto podría ser interesante para usted:

http://fittextjs.com/

Fuente

2012-01-26 16:30:38

ohh, eso es lindo. verificando lo que hace para el rendimiento. – circusdei

me queda bien, gracias por el enlace. ahora en la imagen de fondo:/ – circusdei

No es la forma en que dices. Sin embargo, puedes hacer lo opuesto. Haga que el ancho de la página dependa del tamaño de la fuente, si declara un tamaño de fuente base en ems, luego use los valores em para su diseño. Entonces, el ancho aumentaría si aumentara el tamaño del texto.

Fuente

2012-01-26 16:21:15

Y entonces se podría establecer el puerto de vista basado en el tamaño de página representada. – circusdei

no veo por qué esto no podría llevarse a cabo utilizando las etiquetas de medios de comunicación. Dependiendo de cómo granular que quería hacerlo, se podría hacer algo como esto:

@media only screen and (min-width: 1000px){ 
    #container h1 { font-size:42px; } 
} 
@media only screen and (max-width: 1000px){ 
    #container h1 { font-size:40px; } 
} 
@media only screen and (max-width: 900px){ 
    #container h1 { font-size:35px; } 
} 
@media only screen and (max-width: 800px){ 
    #container h1 { font-size:30px; } 
} 
@media only screen and (max-width: 700px){ 
    #container h1 { font-size:25px; } 
} 
@media only screen and (max-width: 600px){ 
    #container h1 { font-size:20px; } 
} 
@media only screen and (max-width: 500px){ 
    #container h1 { font-size:15px; } 
}

Véase el jsFiddle here para una demostración.

Fuente

2014-03-10 14:34:20 adamdport

Otra dependng opción en su diseño es el uso de vw unidades:

vw:. 1/100th de la anchura de la ventana gráfica (source MDN)

Si su anchura #container se establece como porcentaje de la ventana gráfica, el tamaño de letra se adaptará a su ancho:

DEMO

CSS:

#container h1 { 
    font-size: 5vw; 
}

Compatibilidad con navegadores para vw unidades es IE9 +, ver canIuse para obtener más información.

Fuente

2014-07-19 09:02:33

Esta debería ser la respuesta aceptada, hace exactamente lo que el OP estaba pidiendo sin complementos. – adamdport

¡Exactamente lo que necesito sin complementos! – Sushant

Esto no es lo que OP estaba pidiendo. las unidades de visualización escalan con la ventana gráfica (de ahí su nombre). Lo que OP (y probablemente muchos de los otros) busca es escalar basándose en un contenedor. Dos cosas completamente diferentes –

Mi solución crea una variable CSS que expresa el alto del contenedor relativo a la ventana gráfica, en unidades "vh", esta variable puede usarse con la función "calc" de CSS3 para calcular la altura de la fuente como un porcentaje del altura del contenedor.

el tamaño del contenedor se mide cada vez que la ventana (ventana) se cambia el tamaño

<html> 
     <head> 
      <style> 
       .container { 
        width:100%; 
        /* 
         any rules you like to set the dimensions of the container 
        */ 
        top:40px; 
        height:30vh; 

        border:1px solid red; 
        white-space:nowrap; 
       } 
      </style> 
      <script> 
        function setCSSVariableAccordingToElementHeightRelativeToViewPort(elementClassName, cssVariableName, immutableElement) 
        { 
         var element 
         /* 
          the "immutableElement" parameter is 
           true when the container is never recreated, 
           false if its generated dynamicaly 
         */ 
         if(immutableElement === true) { 
          element = document.querySelector("." + elementClassName) 
         }     

         var onResize = function() { 
          if(immutableElement !== true) { 
           element = document.querySelector("." + elementClassName) 
          } 

          if(element != undefined) { 
           var elementHeight = element.offsetHeight 
           var elementVH = (elementHeight/window.innerHeight) * 100 
           element.style.setProperty(cssVariableName, elementVH + "vh") 
          } 
         } 
         onResize() 
         window.onresize = onResize 
        } 
      </script> 
     </head> 
     <body> 
      <div class="container"> 
       <span style="font-size:calc(var(--container-vh) * 0.25)">25%</span> 
       <span style="font-size:calc(var(--container-vh) * 0.50)">50%</span> 
       <span style="font-size:calc(var(--container-vh) * 1.00)">100%</span> 
      </div> 
     </body> 

     <script> 
      setCSSVariableAccordingToElementHeightRelativeToViewPort("container", "--container-vh", true) 
     </script> 
    </html>

JSFiddle

Fuente

2017-04-19 23:33:58

¿Puede el tamaño de fuente ser un% del tamaño del contenedor en css/css3?

Respuesta

Cuestiones relacionadas