Hay valores en CSS que sirven para dimensionar cosas en relación con la ventana gráfica (el tamaño de la ventana del navegador). Se les llama unidades de ventana, y hay varios que hacen cosas ligeramente diferentes (todas útiles). Una unidad es el 1% de uno de los ejes de la ventana gráfica. Estos pueden ser útiles para el diseño receptivo, es decir, diseñar sitios web que se vean bien en diferentes tamaños de pantalla, aprovechando el espacio disponible para ellos.
Hay muchas cosas que puede hacer con las unidades de ventana gráfica, pero veamos una en particular: tipografía.
Vale la pena mirar nuestra publicación más reciente Simplified Fluid Typography para obtener un tamaño de letra práctico, sujeto y basado en la ventana gráfica.
¿Por qué es esto asombroso?
Hay muchas razones. Aquí hay dos:
- Existe una longitud de línea cómoda para leer texto en las pantallas. No quiero patear un nido de avispas, pero digamos que tiene alrededor de 80 caracteres. Estas unidades le permiten sentirse perfecto y luego tener esa experiencia escalada a cualquier tamaño de pantalla.
- Le permiten acoplar estrechamente la relación de tamaño de, por ejemplo, un encabezado tipográfico y el contenido con el que va. Como su publicación de blog de estilo clásico de Trent Walton.
Cómo trabajan ellos
Una unidad en cualquiera de los tres valores es el 1% del eje de la ventana gráfica. “Viewport” == tamaño de la ventana del navegador == objeto de la ventana. Si la ventana tiene 40 cm de ancho, 1vw == 0,4 cm.
Para usar con font-size, Supongo que es una “letra” que adquiere ese tamaño, pero como sabemos, en fuentes no monoespaciadas, el ancho de una letra es bastante arbitrario. Encuentro que solo necesita modificar los valores para obtenerlo como lo desea. Que es básicamente lo que hacemos de todos modos, ¿verdad?
1vw = 1% del ancho de la ventana gráfica
1vh = 1% de la altura de la ventana gráfica
1vmin = 1vw o 1vh, el que sea menor
1vmax = 1vw o 1vh, el que sea mayor
Utilizarlos
Fácil y descarado:
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}Manifestación
Aquí hay un video de un diseño simple usando unidades vw para el font-size.
Consulte la demostración usted mismo (consulte el soporte del navegador).
O aquí hay un GIF para un encabezado súper simple:
¡Insectos!
El soporte está ahí en Chrome 20+ / Safari 6+, pero falla de una manera bastante significativa. Cuando se cambia el tamaño de la ventana del navegador, la fuente no se ajusta a sí misma de acuerdo con el nuevo tamaño de la ventana gráfica. La especificación dice:
Cuando se cambia la altura o el ancho de la ventana gráfica, se escalan en consecuencia.
Lo puse. Quizás no sea un gran desastre, ya que solo somos nosotros los nerds del diseño que vamos ajustando las ventanas del navegador, pero aún así. La fuente se ajusta cuando se carga una página nueva.
Para solucionar este problema (permitir el cambio de tamaño sin actualizar la página), debe provocar un “repintado” en el elemento. Usé jQuery y simplemente jugué con cada elemento (irrelevante, en este caso) z-index valor, que desencadena el repintado.
causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});ACTUALIZACIÓN: No se preocupe más por esto y definitivamente no fuerce esos repintados. Este problema de cambio de tamaño se solucionó en Chrome 34+ y Safari 7+. No es común cambiar el tamaño de la ventana gráfica en dispositivos móviles, por lo que no estoy seguro de si este error alguna vez los afectó o no.
Soporte del navegador
IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ – Soportado
Chrome 20-34, Safari 6 – Compatible pero tiene problemas de repintado
Hay un par de otras rarezas específicas entre navegadores con ellos, documentadas en Can I Use.
No solo el tamaño de la fuente
Para que conste, estas son solo unidades. Al igual que em, px, lo que. Puede usarlos en cualquier cosa, no solo font-size.
creo font-size es el caso de uso más convincente, ya que elementos como el margen, el relleno y el ancho ya pueden reaccionar esencialmente al tamaño de la ventana del navegador mediante el uso de% unidades. Existe el caso en el que quizás un elemento anidado más profundamente necesita reaccionar al tamaño de la ventana del navegador en lugar de su tamaño principal directo.
Usándolo ahora
Uso nativo
Al menos querrá proporcionar una alternativa:
h1 {
font-size: 36px; /* Some tweener fallback that doesn't look awful */
font-size: 5.4vw;
}Prueba de apoyo
Modernizr aún no tiene una prueba para él, pero puede probarlo usted mismo utilizando algún elemento desechable que vea con un ancho estrecho en CSS, pero luego se restablezca a 100vw en JavaScript, luego mida para ver si el el ancho es igual a window.width. Algo como:
var testEl = $("#vw-test");
testEl.css({
width: "100vw"
});
if (testEl.width() == window.innerWidth) {
// Supported
} else {
// Not Supported
};Aquí está esa prueba en CodePen, pero tenga en cuenta que solo funciona en la vista de página completa; de lo contrario, el cálculo podría estar desactivado debido a problemas de iframe.
Imita la funcionalidad con FitText.js
Esta idea de vincular el ancho total de un encabezado con el ancho de su elemento principal es exactamente lo que hace FitText.js. Solo lo hace a través de JavaScript sofisticado y matemáticas y lapsos y esas cosas. Teóricamente, podría ejecutar la prueba y usar Modernizr.load para cargar FitText.js si no se detecta soporte.
Más información
- David Storey: unidades de visualización receptiva