cambiar el tamaño de la fuente de acuerdo con el tamaño div

He hecho este jsfiddle

el html:

header

not a lot of text here but still overflowing

con css:

 html, body { height: 100%; width: 100%; } #launchmain { width: 55%; display: inline-block; position: relative; top:10%; left:25%; } #launchmain:after { padding-top: 79.26%; display: block; content: ''; margin-top: 10px; } #box1 { border: 1px solid #000000; position: absolute; width:25.37%; height:21.88% } #box2 { border: 1px solid #000000; width: 48.48%; height:21.88%; position: absolute; left:25.64% } #box3 { border: 1px solid #000000; width:25.37%; height:21.88%; position: absolute; left:74.39%; } #box4 { border: 1px solid #000000; width:33.235%; height:53.84%; position: absolute; top:22.07%; } #maininvite { border: 1px solid #000000; width:33.53%; height:53.84%; position: absolute; top:22.07%; left: 33.235%; } #box6 { border: 1px solid #000000; width:33.235%; height:53.84%; position: absolute; top:22.07%; left: 66.765%; } #box7 { border: 1px solid #000000; width:25.37%; height:21.88% ; position: absolute; top:76.2%; } #box8 { border: 1px solid #000000; width: 48.48%; height:21.88%; position: absolute; left:25.64%; top:76.2%; } #box9 { border: 1px solid #000000; width:25.37%; height:21.88% ; position: absolute; top:76.2%; left:74.39%; } #maininvite h2{ font-size: 180%; } p{ position: relative; font-size: 80%; }​ 

Está hecho de 9 cajas, con la mitad encendida contiene texto. Lo hice para que las cajas cambien de tamaño con el tamaño de la pantalla para que permanezca en el mismo lugar todo el tiempo.

El texto, sin embargo, no cambia de tamaño, incluso cuando uso porcentajes.

  1. ¿Cómo cambio el tamaño del texto para que siempre sea la misma relación de toda la página?
  2. ¿Es esta una solución adecuada para manejar múltiples resoluciones? ¿o debería tener muchas verificaciones de @media en el CSS y tener muchos diseños para cada tipo de medio?

Con respecto a su código, vea @Coulton. Necesitarás usar JavaScript.

Checkout ya sea FitText (funciona en IE, simplemente pasaron su sitio de alguna manera) o BigText .

FitText le permitirá escalar algunos textos en relación con el contenedor en el que se encuentra, mientras que BigText se trata más de cambiar el tamaño de diferentes secciones de texto para que tengan el mismo ancho dentro del contenedor.

BigText configurará su cadena exactamente al ancho del contenedor, mientras que FitText tendrá menos píxeles perfectos. Comienza estableciendo el tamaño de fuente en 1/10 del ancho del elemento del contenedor. No funciona muy bien con todas las fonts por defecto, pero tiene una configuración que le permite disminuir o boost la “potencia” del tamaño. También le permite establecer un tamaño de fuente mínimo y máximo. Tomará un poco de toquetear para empezar a trabajar la primera vez, pero funciona muy bien.

http://marabeas.io <- jugando con él actualmente aquí. Por lo que yo entiendo, BigText no funcionaría en mi contexto en absoluto.

Para aquellos de ustedes que usan Angularjs, aquí hay una versión angular de FitText que he hecho.


Aquí hay una mezcla MENOS que puedes usar para hacer que la solución de @ humanityANDpeace sea un poco más bonita:

 @mqIterations: 19; .fontResize(@i) when (@i > 0) { @media all and (min-width: 100px * @i) { body { font-size:0.2em * @i; } } .fontResize((@i - 1)); } .fontResize(@mqIterations); 

¡Y una versión SCSS gracias a @NIXin!

 $mqIterations: 19; @mixin fontResize($iterations) { $i: 1; @while $i <= $iterations { @media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } } $i: $i + 1; } } @include fontResize($mqIterations); 

Mi respuesta no requiere Javascript y solo depende de CSS3 (disponible en la mayoría de los navegadores modernos). Personalmente me gusta mucho si el diseño no se basa demasiado en Javascript.

Mi respuesta es una solución “pura CSS3, no requiere Javascript” :

La solución como se puede ver aquí ( http://jsfiddle.net/uNF3Z/16/ ) utiliza las siguientes adiciones a los estilos CSS (que hacen uso de la consulta @media de CSS3)

 @media all and (min-width: 50px) { body { font-size:0.1em; } } @media all and (min-width: 100px) { body { font-size:0.2em; } } @media all and (min-width: 200px) { body { font-size:0.4em; } } @media all and (min-width: 300px) { body { font-size:0.6em; } } @media all and (min-width: 400px) { body { font-size:0.8em; } } @media all and (min-width: 500px) { body { font-size:1.0em; } } @media all and (min-width: 600px) { body { font-size:1.2em; } } @media all and (min-width: 700px) { body { font-size:1.4em; } } @media all and (min-width: 800px) { body { font-size:1.6em; } } @media all and (min-width: 900px) { body { font-size:1.8em; } } @media all and (min-width: 1000px) { body { font-size:2.0em; } } @media all and (min-width: 1100px) { body { font-size:2.2em; } } @media all and (min-width: 1200px) { body { font-size:2.4em; } } @media all and (min-width: 1300px) { body { font-size:2.6em; } } @media all and (min-width: 1400px) { body { font-size:2.8em; } } @media all and (min-width: 1500px) { body { font-size:3.0em; } } @media all and (min-width: 1500px) { body { font-size:3.2em; } } @media all and (min-width: 1600px) { body { font-size:3.4em; } } @media all and (min-width: 1700px) { body { font-size:3.6em; } } 

Lo que esto en efecto causa es que el tamaño de letra se ajusta al ancho de pantalla disponible. Este ajuste se realiza en pasos de 100px (que es lo suficientemente preciso para la mayoría de los propósitos) y cubre un ancho de pantalla máximo de 1700px, que creo que será ampliamente (2013) y puede al agregar líneas adicionales mejorarse aún más.

Un beneficio lateral es que el ajuste del tamaño de fuente se produce en cada cambio de tamaño. Este ajuste dynamic (porque, por ejemplo, las ventanas del navegador se redimensiona) podría no estar cubierto por la solución basada en Javascript.

Estaba buscando la misma funcionalidad y encontré esta respuesta. Sin embargo, quería darles una actualización rápida. Es la unidad vmin de CSS3.

 p, li { font-size: 1.2vmin; } 

vmin significa ‘lo que sea más pequeño entre el 1% de la altura de ViewPort y el 1% del ancho de ViewPort’.

Más información en SitePoint

La respuesta que estoy presentando es muy simple, en lugar de usar “px”, “em” o “%”, usaré “vw”. En resumen, podría verse así: – h1 {font-size: 5.9vw;} cuando se utiliza para fines de encabezado.

Vea esto: Demo

Para más detalles: tutorial principal

Aquí hay una versión de SCSS de Mixin de Patrick.

 $mqIterations: 19; @mixin fontResize($iterations) { $i: 1; @while $i <= $iterations { @media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } } $i: $i + 1; } } @include fontResize($mqIterations); 

He intentado hacer mi propia respuesta a esto, de una manera que creo que es más fácil, por favor mire aquí:

https://stackoverflow.com/questions/32035079/text-resize-on-browser-resize-my-simple-answer/32035080#32035080