¿Cómo puedo aumentar el tamaño de fuente en función del ancho de la ventana?

Question

Estoy creando una aplicación basada en la web que se mostrará en la televisión y otros monitores de gran tamaño. Estoy queriendo una manera rápida y fácil de aumentar el tamaño de la fuente para que se ajuste al tamaño de la ventana. El texto es dinámico

Cualquier ayuda es muy apreciada. ;)

Answer 1

OK - para empezar, debe usar Ems para todas las mediciones que pueda en su UI. Como mínimo, califique todos sus elementos de texto con Ems (en lugar de píxeles o%). Si es posible, establecer el ancho de los bloques de diseño en Ems también ayudará a la aplicación a escalar proporcionalmente. Si puede establecer todas sus dimensiones en Ems, toda su aplicación será visualmente escalable.

La clave para Ems es que están dimensionados en relación con el tamaño de fuente de su elemento principal, lo que significa que puede ajustar el tamaño de todo el texto en proporción, ajustando el tamaño de fuente del elemento del cuerpo (desde todo es relativo al cuerpo).

El último paso es usar una pieza de javascript para detectar el ancho de la ventana gráfica y establecer el tamaño de la fuente del cuerpo en consecuencia. Dependiendo de cuán fino quiera controlar la báscula, puede usar clases en el elemento del cuerpo para configurar un conjunto de valores predefinidos o manipular directamente el tamaño de la fuente. Si es posible, tiendo a usar tamaños predeterminados para facilitar las pruebas.

Usaría una biblioteca de JavaScript para facilitar la detección del ancho de la ventana gráfica; es notoriamente diferente en diferentes navegadores. Con jQuery, el código podría ser:

$(function(){ 
    var viewPortWidth = $(window).width(); 

    if (viewPortWidth > 1900) {$('body').addClass('extraWide')} 
    else if (viewPortWidth > 1400) {$('body').addClass('wide')} 
    else if (viewPortWidth > 1000) {$('body').addClass('standard')} 
    else if (viewPortWidth > 700) {$('body').addClass('narrow')} 
    else {$('body').addClass('extraNarrow')} 

}); 

Y el CSS:

<style type="text/css"> 

    body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */ 

    body.extraWide {font-size:85%;} 
    body.wide {font-size:75%;} 

    body.narrow {font-size:50%;} 
    body.extraNarrow {font-size:40%;} 

</style> 

Esos valores pueden ser ajustados como usted quiera, por supuesto, y se puede configurar tantas divisiones como desee . Esta es una solución rápida y sucia, pero debería funcionar.

Una nota - el código javascript que se muestra solo configurará la báscula una vez cuando se cargue la página; no se ajustará cuando cambie el tamaño de la ventana. Esa es una posible adición, pero hay consideraciones más importantes antes de ir por esa pista. Personalmente, incluso pensaría en establecer el valor de la escala en una cookie, para mantener la experiencia del usuario constante durante toda la sesión, en lugar de volver a escalar cada carga de página.

Answer 2

Si le interesa/capaz de utilizar CSS3 entonces no es una solución puro CSS - los medios de comunicación y consulta del >>http://www.w3.org/TR/css3-mediaqueries/

Así, por ejemplo, el CSS:

@media screen and (min-device-width: 800px) { ... } 

... le permite especificar diferentes estilos para la página cuando se muestra en una pantalla de 800px o superior. Obviamente se puede variar esto como te gusta - algo muy poderoso

También es posible que desee considerar el javascript escrito previamente al final de este enlace ... http://www.themaninblue.com/experiment/ResolutionLayout/#

Answer 3

respuesta de Beejamin funcionó como se esperaba, he añadido un tiempo de espera de conjunto entonces escalaría en tiempo real. Sin embargo, no revierte la escala.

$(document).ready(function() {scaleFont();}); 

    function scaleFont() { 

     var viewPortWidth = $(window).width(); 

     if (viewPortWidth > 1900) {$('body').addClass('extraWide')} 
     else if (viewPortWidth > 1400) {$('body').addClass('wide')} 
     else if (viewPortWidth > 1000) {$('body').addClass('standard')} 
     else if (viewPortWidth > 700) {$('body').addClass('narrow')} 
     else {$('body').addClass('extraNarrow')} 

     setTimeout(scaleFont, 100); 
    } 

EDIT: SOLUCIONADO efecto inverso

$(document).ready(function() {scaleFont();}); 

    function scaleFont() { 

     var viewPortWidth = $(window).width(); 

     if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')} 
     else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')} 
     else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')} 
     else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')} 
     else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')} 


     setTimeout(scaleFont, 100); 
    } 

Answer 4

Aquí está una más simple y sin jQuery solución:

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

Answer 5

una versión mejor (para mí) de la solución proporcionada por japanFour :

$(document).ready(scaleFont); 
$(window).resize(scaleFont); 


function scaleFont() { 

    var viewPortWidth = $(window).width(); 

    if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');} 
    else if (viewPortWidth >= 1400) {$('body').attr('class','wide');} 
    else if (viewPortWidth >= 1000) {$('body').attr('class','');} 
    else if (viewPortWidth >= 700) {$('body').attr('class','narrow');} 
    else {$('body').attr('class','extraNarrow');} 
} 

Por lo tanto, sólo cambia el tamaño si la ventana se cambia el tamaño (evitando setTimout), y le dará body sólo la clase exacta que necesita

Answer 6

Aquí sería mi enfoque (con la eliminación de clases reales + Drupal 7 jQuery):

(function ($) { 
$(document).ready(function() { 


var bodyClassArr = new Array('extraWide', 'wide', 'normal', 'narrow', 'extraNarrow', 'mobile'); 

function setBodyClass(){ 
    // remove previous classes 
    for(x in bodyClassArr){ 
     if($('body').hasClass(bodyClassArr[x])){ $('body').removeClass(bodyClassArr[x]); } 
    } 
    var viewPortWidth = $(window).width(); 
    if (viewPortWidth > 1900) { $('body').addClass('extraWide'); } 
    else if (viewPortWidth > 1400) { $('body').addClass('wide'); } 
    else if (viewPortWidth > 1000) { $('body').addClass('normal'); } 
    else if (viewPortWidth > 700) { $('body').addClass('narrow'); } 
    else if (viewPortWidth < 700) { $('body').addClass('mobile'); } 
    else { $('body').addClass('normal'); } 
}; 
setBodyClass(); 

$(window).resize(function() { setBodyClass(); }); 

}); // jquery end 
}(jQuery)); 

Answer 7

Sé esto en una pregunta bastante antigua, pero responderé de todos modos debido a que esta es una pregunta que se puede buscar mucho.

En realidad, hay otro enfoque que no sea Consultas de medios que es también puro CSS:

---

unidades de ventanilla:vw, vh, vmin, vmax.

Se trata de unidades de longitud que representan el 1% del tamaño de la ventana gráfica para ancho de ventana (vw), altura (vh), la menor de las dos (vmin) o la mayor de las dos (vmax).

Así, por ejemplo, podría utilizar:

CSS:

body { 
    font-size:5vmin; 
} 

Esto establece el tamaño de fuente de todo el documento a 5% del tamaño de ventana más pequeña (la anchura o la altura) Así, por ejemplo, en un IPAD (1024 x 768 píxeles) de la font-size habrá 38,4 px(5% de los 768 píxeles ya que este es el tamaño más pequeño de cualquiera de los tamaños de ventana gráfica).

---

Tan grande como esto puede sonar todavía viene con algunas cuestiones que deben tenerse en cuenta:

• Chrome no admite unidades de ventana gráfica para border widths, column gaps, transform values, box shadows o en calc() hasta Versión 34;
• Safari & iOS Safari(ambos 6 y 7) hace no unidades de apoyo de ventana gráfica para border widths, column gaps, transform values, box shadows o en calc();
• iOS 7 Safari establece los valores de unidad de visualización en 0 si la página se ha dejado y se devuelve después de 60 segundos;
• Internet Explorer 9 en modo de impresión interpreta vh como páginas. 30vh = 30 páginas;
• iOS 7 Safari recalcula el ancho establecido en vh como vw, y las alturas configuradas en vw como vh, cuando cambia la orientación.

Fuente:http://caniuse.com/#feat=viewport-units

Answer 8

¿Hay algo malo con el siguiente código? Si bien estoy de acuerdo con que las consultas de medios son muy útiles, quería escalar continuamente el tamaño de fuente de ciertos elementos de mi página a medida que la ventana crecía o se reducía. Este código parece mucho más simple que las otras soluciones jquery de establecer constantes de clases en base a la anchura de visualización de píxeles:

$(document).ready(function() { 

    var setFontSize = function() { 
    var viewportWidth = $(window).width(); 
    var fontSize = Math.sqrt(viewportWidth/250); 
    $('.myElement').css('font-size',fontSize+'em'); 
    }; 

    $(window).resize(function() { 
    setFontSize(); 
    }); 

    setFontSize(); 

});