Tamaño de fuente que se expande cuando cambia el tamaño de la ventana

¿Cómo puedo hacer que mi fuente en HTML de modo que cuando expanda la ventana, el tamaño del texto también se expanda? . Algo así como el establecimiento de un porcentaje para el texto que se enfrentará a un porcentaje del tamaño de la caja es enTamaño de fuente que se expande cuando cambia el tamaño de la ventana

Aquí es una ilustración de lo que me gustaría que suceda:

#box #text { 
    font-size: 50%; 
}

Ahora vamos decir #box es 200px, #text debe ser 100px. Obviamente, no puedo simplemente poner un ancho de corrección para #text porque en el sitio #box tendrá un ancho dinámico.

Fuente

2011-06-01 Chaim

Como una ID es única, no hay necesidad de poner #text además de #box en su declaración css. Simplemente escriba #text ya que no se supone que ningún otro elemento obtenga este ID – ecchymose

Bien, lo entiendo. Lo estaba haciendo así para ilustrar que '# text' estaba dentro de' # box' – Chaim

@ecchymose: Y, ¿y si uso un archivo css para muchas páginas html? – Chaim

Hazlo en jquery.

$(window).resize(function(){ 
    $('#box #text').css('font-size',($(window).width()*0.5)+'px'); 
});

Fuente

2011-06-01 20:15:57

¡Gracias, funciona perfecto! – Chaim

Uso del (altura ventana gráfica) vh, vw (anchura ventana gráfica), y/o vm (mínimo ventana gráfica (más pequeña de las dimensiones)) unidades en navegadores que soportan completamente CSS3, y para otros navegadores escuchar para resize y JavaScript como en la respuesta de Razor Storm.

Fuente

2011-06-01 20:26:26

No sabía acerca de esto vh vw vm. ¿Puede dar un ejemplo? ¡se ve genial! :) –

'100vw' es el ancho de la ventana gráfica; '200vw' es el doble del ancho de la ventana gráfica. El resto debe ser autoexplicativo. Probablemente quieras usar la unidad 'vm' ya que usa la menor de las dos dimensiones. –

¡Eso es increíble! ¿Tiene css3 más de estas constantes dinámicas? –

En los navegadores que lo admitan, puede usar CSS media queries para cambiar su diseño en función del ancho de la ventana.

Fuente

2011-06-01 20:45:55 Neil

Buena idea, pero eso no me permitirá controlar dinámicamente el tamaño de las fuentes en función del tamaño de la ventana. – Chaim

@ Chaim Chaikin Puede usar cualquier CSS dentro del bloque de consulta de medios, para que pueda cambiar el color de fondo o la imagen de estilo de lista si así lo desea ... – Neil

Sí, entiendo, sin embargo, el valor de 'font-size' puede no se relaciona dinámicamente con el tamaño de la ventana de visualización (o con el cuadro "# box" mi caso). Esto es particularmente necesario para mí, ya que el usuario puede cambiar el tamaño de la ventana como lo desee y quiero que el 'font-size' de' # text' se ajuste exactamente como corresponda. – Chaim

Tamaño de fuente que se expande cuando cambia el tamaño de la ventana

Respuesta

Cuestiones relacionadas