cambiar automáticamente el tamaño del texto (tamaño de fuente) al cambiar el tamaño de la ventana?

He intentado (en vano) crear una página cuyos elementos cambiarían de tamaño a medida que cambiaba el tamaño de la ventana. Lo tengo trabajando en CSS para las imágenes no hay problema, pero no puedo lograr lo mismo para el texto, y no estoy seguro de que sea posible en CSS. Y parece que no puedo encontrar un script de jquery que logre esto.

Cuando un usuario cambia el tamaño de la ventana, esencialmente quiero que la página se escale de forma dinámica y fluida, sin que el usuario tenga que invocar el zoom de la página. Esto funciona bien en mi img divs a través de css, pero no para el texto, que se mantiene del mismo tamaño.

¿Algunas ideas?

He tenido que hacer esto yo mismo. Lo que hice fue establecer un tamaño de texto base para el cuerpo y porcentajes para todos los demás tamaños. Luego utilicé una secuencia de comandos jQuery simple para cambiar el tamaño de la base en el cambio de tamaño de la ventana. Los otros tamaños se actualizan también.

Usé algo como esto:

$(function() { $(window).bind('resize', function() { resizeMe(); }).trigger('resize'); }); 

y en la función resizeMe, tuve esto:

 //Standard height, for which the body font size is correct var preferredHeight = 768; //Base font size for the page var fontsize = 18; var displayHeight = $(window).height(); var percentage = displayHeight / preferredHeight; var newFontSize = Math.floor(fontsize * percentage) - 1; $("body").css("font-size", newFontSize); 

Pruebe un plugin jQuery como FitText . Ajusta automáticamente el texto para que se ajuste al ancho del elemento principal.

Otro plugin jQuery con el mismo objective es BigText ( demo ).

Puede hacer esto con las consultas de medios de CSS3 , especificando diferentes tamaños de fuente de acuerdo con el tamaño del navegador. Hay un buen artículo para esto en A List Apart

Para soporte de IE, puede ser que pueda hackearlo usando expresiones CSS

Esto requiere que utilice un tamaño de fuente base fijo, por ejemplo en la etiqueta del body , y el porcentaje o tamaños basados ​​en em cualquier otro lugar.

Sobre la base de la respuesta de Lizzan, aquí hay una versión que usa la raíz cuadrada de ancho y alto para obtener un tamaño proporcional:

 // When document has finished loading $(document).ready(function() { var resizeText = function () { // Standard height, for which the body font size is correct var preferredFontSize = 180; // % var preferredSize = 1024 * 768; var currentSize = $(window).width() * $(window).height(); var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize); var newFontSize = preferredFontSize * scalePercentage; $("body").css("font-size", newFontSize + '%'); }; $(window).bind('resize', function() { resizeText(); }).trigger('resize'); }); 

Demostración: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

Estoy usando el truco de http://practicaltypography.com/end-credits.html#bio M. Butterick:

   

roryf está en el camino correcto!

Media Queries es (una de) la (s) respuesta (s).

El truco aquí es usar% para tamaños de fuente en todas partes comenzando desde el cuerpo. De esta forma, el tamaño de fuente se hereda y cuando lo cambias en cuerpo, se cambia en todas partes.

Pruebe algo como:

 body { font-size: 100% } h1 {font-size: 200% } @media all and (max-width:600px) { body {font-size: 70%} } 

Cuando el ancho del sitio web se reduce a 600px, el tamaño de la fuente cambiará al 70% de lo que era en todas partes, donde se usa el% (también h1 en este ejemplo).

¡La respuesta de Lizzans es perfecta! Deje el -1 donde está! Los gatitos estaban muriendo por todo el lugar cuando lo quité.

En lugar de la variable fontsize, simplemente configúrela para el tamaño de fuente estándar de su página. El mío fue 16.

Puede hacer que el texto redimensionable sea más simple. Esta solución funciona para mí. http://jsfiddle.net/VooDi/dka48dx8/

Para body set font-size, equivalente al ancho interno de su ventana actual;

para jsfiddle 560 px;

 body { font-size: 560px; } 

js:

 onresize=onload=function() { document.body.style.fontSize=window.innerWidth+"px" } 

y para el elemento necesario establecer el tamaño de fuente en porcentaje

 

Resize this text!!!!

Eso es todo. Espero que esto ayude a alguien.