rem, vh, vw, vmin: nuevas unidades de texto en CSS3
Más recientemente la proliferación de los sitios web con diseño adaptable (responsive design in english) han marcado como tendencia el uso de unidades relativas (% o em) en detrimento del pixel para conseguir una mejor visualización en dispositivos móviles. Aún así, seguimos teniendo algunos problemas con el uso de estas unidades por el efecto «cascada». Un ejemplo sencillo:
<style>
body { font-size: 100%; }
p, li { font-size: 0.75em; }
</style>
<p> soy un texto de 12px </p>
<ul>
<li> yo también soy un texto de 12px
<ul><li> Yo tengo 9 px </li></ul>
</li>
</ul>
Utilizando los em como unidad para párrafos y listas, que a su vez están anidadas, provoca que el tamaño del texto vaya decreciendo. Controlar este efecto en páginas grandes y complejas es bastante complicado y al final suele resolverse mediante prueba y error. El problema de em es que su valor va referido al contenedor del elemento que tiene aplicado el estilo.
Nuevas unidades relativas en CSS3: REM
Para corregir este problemilla las últimas especificaciones CSS3 nos traen novedades. Empezamos con rem, que no es un grupo de música, sino una nueva unidad de medida de texto relativa. La principal diferencia entre rem y em es que rem está referido al elemento raíz de la página en lugar del contenedor.
El ejemplo anterior quedaría resuelto con:
p, li
{
font-size: 12px;
font-size: 0.75rem;
}
VW, VH y VMIN: Unidades relativas al dispositivo
Otras novedades importantes son las unidades vw, vh y vmin. Enfocadas al uso en diseño adaptado a distintos dispositivos, se trata de unidades relativas al tamaño en pixels del dispositivo. Funcionan así:
- 1 vw = 1% de la anchura (width) de la ventana del dispositivo.
- 1vh = 1% de la altura (height) de la ventana del dispositivo.
- 1vim = 1% de la dimensión, altura o anchura, más pequeña del dispositivo.
Por ejemplo, suponiendo un tamaño de ventana del navegador de 1000×800, establecer el texto en 1.8vw equivale a 18 px , 2vh serían 16px y 1.5vmin = 12px.
Aún no todos los navegadores soportan las nuevas unidades, pero como ya estamos acostumbrados poco a poco se irán implementando. De momento funcionan 100% en Webkit (chrome, safari, ios) e IE9 / IE10 (en IE9 vmin se llama vm). En Firefox se incluirá en la versión 19 (finales de febrero) y en Opera se implementará en breve.
TE PUEDE INTERESAR
Cursos gratuitos para formarte como docente
Si quieres aprender técnicas de impartición, tutorización, evaluación, incluso orientar laboralmente en acciones formativas para el empleo, en Nowe tenemos plazas libres para cursar, de forma gratuita, los tres últimos módulos formativos incluidos en el Certificado...
Docencia de la Formación Profesional para el Empleo
Si quieres dar un cambio en tu perfil profesional y acceder al mercado laboral, realiza este Certificado y trabaja como formador. En Nowe vamos a impartir el Certificado de Profesionalidad de Docencia de la Formación Profesional para el Empleo. Nos quedan plazas...
Curso gratuito de programación.
Curso gratuito de programación para desempleados y con titulación oficial, en Nowe. La demanda de programadores en empresas de Madrid, Barcelona, Valencia, etc ha crecido en torno a un 60%. Y como resultado de la actual crisis del COVID-19 se ha acelerado el proceso...