¿Es posible establecer un tamaño de fuente a un porcentaje del tamaño del contenedor? Tengo una lista de elementos que tienen una imagen, un encabezado y una descripción. La imagen cambia de tamaño automáticamente a medida que el usuario cambia el tamaño de la ventana. Me gustaría que la fuente del encabezado haga lo mismo.CSS, tamaño de fuente relativo
editar: Javascript/JQuery está bien.
Sólo para ampliar la respuesta de Tyler, esto es lo que Javascript es para, aunque estoy poco seguro de que puede lograr la misma hazaña usando los visores de CSS3, se será mejor usar jQuery (que es por lo general en la memoria caché del navegador de la mayoría y siempre alojado en Google así que no hay necesidad de preocuparse :)
Si usted tiene un css así:
#body #mytext {
font-size: 50%;
}
puede cambiar el tamaño de forma dinámica en jQuery así:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
Solo un FYI, no tiene que especificar que '# mytext' es un descendiente de' # body' a menos que esté tratando de aumentar el valor de especificidad (que francamente es el camino equivocado si usa los id's) . –
Depende del escenario, no hay nada de malo en usar CSS de esta manera. Aunque, es solo una demostración ... –
Incorrecto como en la sintaxis, no. Incorrecto como en semántica, sí. –
No, esto solo se puede hacer en JavaScript.
, como dijo Tyler, las fuentes se calculan en relación con el tamaño de fuente establecido actual del navegador , si usa tamaños dinámicos de fuente como "em" o "%". Debe calcular el tamaño de letra con javascript si desea obtener un tamaño que depende del alto/ancho de una etiqueta – r3bel
Lo he hecho con jquery en el pasado. Consulte este artículo si le interesa. También puede usar CSS para detectar el ancho del dispositivo (no el navegador, y no es compatible con navegadores más antiguos).
Es jQuery es una opción?
Super fácil si se trata de: fiddle
<div id="container">
<p>HELLO WORLD!</p>
</div>
<script>
$(document).ready(function() {
var sizeMe = ($('#container').height()/100) * 90; /* 90% of container */
$('p').css('font-size', sizeMe);
};
</script>
. Hay muchos otros atributos que teóricamente deberían modificarse (por ejemplo, texto-sangría, altura de línea, etc.). –
Pero, de nuevo, el OP no preguntó sobre eso. :) –
Esto no funciona para mí, incluso en jsfiddle. ? –
En CSS3, no es la unidad vw, acrónimo de 1/100 de la anchura de la ventana gráfica. Por ejemplo,
h1 { font-size: 5.5vw; }
establece el tamaño de fuente encabezado para 5,5% de la anchura de la vista.
Sin embargo, esto parece funcionar en IE 9 (modo estándar) solo hasta ahora. Además, IE 9 no cambia dinámicamente el valor de la unidad cuando se cambia el tamaño de la ventana del navegador, solo durante la recarga.
Sin embargo, esto no es relativo al tamaño del contenedor. –
Esto da el mismo efecto, pero cualquier cambio en el tamaño del contenedor ya sea por JavaScript o por cambiar el CSS, esto no funcionará del todo bien. Uno debería recordar actualizar esto al cambiar el tamaño del contenedor. –
Por tamaño del contenedor, ¿quiere decir incluir el relleno, incluido el relleno y el borde, o incluir el relleno, el borde y el margen? –
Además, IMO, le desaconsejo cambiar el tamaño del tamaño de fuente en función del tamaño de ventana/ventana. Previene la legibilidad en gran medida. –
contenedor, ventana, relleno, lo que sea. Solo quiero que se pueda cambiar el tamaño automáticamente en relación con cualquier otra cosa que cambie cuando se cambie el tamaño de la ventana, y por lo tanto del diseño ... –