Unidades de medida CSS. Unidades CSS (píxeles, Em y Ex) y función de cálculo. Ejemplos
Mencioné nuevas (relativamente) unidades de medida. Estas unidades son vw, vh, vmin y vmax y se basan en el tamaño de la ventana gráfica del navegador. Su tamaño real cambia a medida que cambia la ventana gráfica del navegador, lo que hace que estas unidades sean ideales para el diseño responsivo. Aunque en mi publicación anterior estuve en contra del uso de estas unidades para especificar tamaños de fuente, pueden ser muy útiles para trabajar con elementos de diseño.
Unidades de ventana gráfica
Las unidades de la ventana gráfica son unidades relativas, lo que significa que no se pueden medir objetivamente. Su tamaño está determinado por el tamaño de la ventana gráfica del navegador. Hay cuatro unidades relacionadas con la ventana gráfica.
Me centraré en los dos primeros ya que son los más utilizados. En muchos casos, las unidades de ventana gráfica (vh y vw) se superponen con porcentajes en términos de capacidades. Sin embargo, cada uno de ellos tiene sus propias fortalezas y debilidades.
Para resumir, se ve así:
Cuando se trata de ancho, % es mejor y cuando se trata de altura, vh es mejor.
Elementos de ancho de página completo: % > vw
Como ya dije, vw determina el tamaño del elemento en función del ancho de la ventana gráfica. Sin embargo, los navegadores calculan el tamaño en función del espacio de la barra de desplazamiento.
Si el ancho de la página excede el ancho de la ventana gráfica, aparece una barra de desplazamiento. Sin embargo, en realidad el ancho de la ventana gráfica es mayor que el ancho del elemento html.
Ventana gráfica > html > cuerpo
Entonces, si establece el ancho del elemento en 100vw, el elemento se extenderá más allá del html y el cuerpo. En este ejemplo, hice un borde rojo alrededor del elemento html y rellené las secciones con diferentes colores.
Debido a este matiz, es mejor crear elementos en todo el ancho de la página usando porcentajes, en lugar de depender del ancho de la ventana gráfica.
Elementos de altura de página completa: vh > %
Al crear elementos que deben tener la misma altura que la página, es mucho mejor usar vh en lugar de porcentajes. Dado que el tamaño de un elemento, definido como porcentaje, es relativo a su elemento principal, podemos obtener un elemento con una altura igual a la altura de la pantalla solo si su elemento principal también ocupa toda la altura de la pantalla. Esto significa que debemos posicionar el elemento como fijo para que el elemento html sea el padre, o recurrir a algún truco.
Usar vh para lograr este efecto es bastante simple:
Ejemplo (altura: 100vh;)
Independientemente de cómo esté anidado el elemento .example, sus dimensiones se pueden establecer en relación con las dimensiones de la ventana gráfica. El problema del desplazamiento no nos molestará ya que la mayoría de sitios no tienen barra de desplazamiento horizontal.
A continuación se muestran algunos ejemplos de cómo se pueden utilizar las unidades vh.
Imágenes de fondo a pantalla completa
Un uso típico de la unidad vh es crear una imagen de fondo que abarque todo el alto y ancho de la pantalla, independientemente del tamaño del dispositivo. Esto es bastante fácil de hacer.
Bg ( posición: relativa; fondo: url("bg.jpg") centro/portada; ancho: 100%; alto: 100vh; )
De manera similar, podemos crear un efecto de "páginas" dándole a cada sección las dimensiones de la ventana gráfica.
Sección ( ancho: 100%; alto: 100vh; )
Podemos usar JavaScript para crear la ilusión de pasar una página.
$("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animar((desplazamientoArriba: movePos), 1000))
Imagen plegable
Vh también se puede utilizar para controlar el tamaño de una imagen dentro de una página. Por ejemplo, en el marco de un artículo. Queremos asegurarnos de que cualquier imagen se muestre en su totalidad independientemente del tamaño de la pantalla.
Necesitaremos el siguiente código
Img ( width: auto; /* El ancho automático será proporcional al alto */ max-width: 100%; /* No más que el ancho del elemento padre */ max-height: 90vh; /* No más que el alto de la ventana gráfica */ margin: 2rem auto )
Soporte del navegador
Debido a que estas unidades son relativamente nuevas, todavía existen problemas con ciertos navegadores.
He aquí cómo solucionarlos.
CSS utiliza unidades absolutas y relativas para dimensionar varios elementos. Las unidades absolutas son independientes del dispositivo de salida, pero las unidades relativas definen el tamaño de un elemento en relación con el valor de otro tamaño.
Unidades relativas
Las unidades relativas se suelen utilizar para trabajar con texto. en la mesa 1 enumera las principales unidades relativas.
La unidad em es un valor mutable que depende del tamaño de fuente del elemento actual (el tamaño se establece mediante la propiedad de estilo de tamaño de fuente). Cada navegador tiene un tamaño de texto incorporado que se utiliza cuando este tamaño no se especifica explícitamente. Por lo tanto, inicialmente 1em es igual al tamaño de fuente predeterminado del navegador o al tamaño de fuente del elemento principal. La notación porcentual es idéntica a em, en que los valores de 1em y 100% son iguales.
La unidad ex se define como la altura del carácter "x" minúscula. ex está sujeto a las mismas reglas que em , es decir, que está vinculado al tamaño de fuente predeterminado del navegador o al tamaño de fuente de su elemento principal.
La unidad ch es igual al ancho del carácter "0" del elemento actual y, como em, depende del tamaño de fuente.
La diferencia entre em y rem es la siguiente. em depende del tamaño de fuente del elemento principal y cambia con él, y rem está vinculado al elemento raíz, es decir, el tamaño de fuente especificado para el elemento html.
También hay un grupo de unidades relativas vinculadas al tamaño de la ventana gráfica del navegador. en la mesa 2 muestra una lista de ellos con una descripción.
Unidades absolutas
Las unidades absolutas representan dimensiones físicas: pulgadas, centímetros, milímetros, puntos, picas y píxeles. Para dispositivos con bajos ppp (el número de píxeles por pulgada determina la densidad de píxeles), el enlace es por píxel. En este caso, una pulgada equivale a 96 píxeles. Obviamente, la pulgada real no coincidirá con la pulgada de dicho dispositivo. En dispositivos con alto DPI, la pulgada real es la misma que la pulgada en pantalla, por lo que el tamaño de píxel se calcula como 1/96 de pulgada. en la mesa 3 enumera las unidades absolutas básicas.
Ejemplo
encabezado de 30px
Tamaño del texto 1,5 em
titular de 24 puntos
Desplazar el texto hacia la derecha 30 milímetros
Nota
Al configurar las dimensiones, asegúrese de especificar las unidades de medida, por ejemplo, ancho: 30 px. De lo contrario, el navegador no podrá mostrar el resultado deseado porque no comprende qué tamaño necesita. Las unidades no se suman sólo cuando el valor es cero (margen: 0).
Internet Explorer admite la unidad vm en lugar de vmin.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
- Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
- Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
- Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
- Borrador ( Borrador de especificación) - el primer borrador de la norma.
Usar el atributo de tamaño de fuente para escalar el texto es uno de los aspectos más difíciles del estilo en CSS. CSS ofrece cuatro unidades para medir el tamaño del texto que se muestra en un navegador web. ¿Cuál de estas cuatro unidades es más adecuada para documentos web? Este tema ha causado mucha discusión y controversia. Es difícil dar una respuesta definitiva a tal pregunta.
Conociendo las unidades
- Porcentaje ( % ): El porcentaje es muy similar a em, excepto por algunas diferencias clave. Primero, el tamaño de fuente actual es 100% (es decir, 12 puntos = 100%). El uso de la unidad Porcentaje le permite ampliar/reducir el texto para facilitar la lectura.
Eh ( ellos): em es una unidad escalable que se utiliza para documentos web. Un em equivale al tamaño de fuente actual. Por ejemplo, si el tamaño de fuente del documento es 12 puntos, entonces 1 em equivale a 12 puntos. Dado que em está escalado, 2 em equivale a 24 puntos, .5 em equivale a 6 puntos, etc. Debido a su escalabilidad y alta compatibilidad con dispositivos móviles, em se utiliza cada vez más en documentos web.
Píxeles ( píxeles): Los píxeles son unidades de tamaño fijo que se utilizan para todo lo que se lee en la pantalla de una computadora. Un píxel equivale a un punto en la pantalla de una computadora (esta es la división más pequeña de la resolución de su pantalla). Muchos diseñadores web utilizan píxeles en documentos web para garantizar que el sitio web tenga un aspecto perfecto cuando se muestra en un navegador. El único problema es que los píxeles no se pueden ampliar para adaptarse a lectores con baja visión ni reducirlos para facilitar la lectura en dispositivos móviles.
Puntos ( pt): Los puntos se utilizan tradicionalmente en medios impresos (es decir, para cualquier cosa impresa en papel). Un punto equivale a 1/72 de pulgada. Los puntos son muy similares a los píxeles en el sentido de que tienen un tamaño fijo y no se pueden ampliar ni reducir.
¿Cuál es la diferencia?
La diferencia entre estas unidades es fácil de entender con ejemplos específicos. Así es como se relacionan entre sí: 1em = 12pt = 16px = 100%. Veamos qué sucede cuando aumentamos el tamaño de fuente principal (usando el selector CSS del cuerpo) del 100% al 120%.
Como puede ver, Ems y Porcentaje aumentan a medida que aumenta el tamaño de fuente base, pero los Píxeles y Puntos no. Es fácil usar un tamaño absoluto para su texto, pero es mucho más fácil usar texto escalable que se muestra en cualquier dispositivo. Por lo tanto, es preferible utilizar unidades Em y Porcentaje para el texto de un documento web.
¿EM o porcentaje?
Descubrimos que Point y Pixel no son las mejores unidades para documentos web. Entonces, nos quedan Em y Percent. En teoría, Em y Porcentaje son las mismas unidades, pero en la práctica existen diferencias menores entre ellos que no se pueden ignorar.
En el ejemplo anterior, utilizamos la unidad Porcentaje como tamaño de fuente base (para la etiqueta del cuerpo). Si cambia el tamaño de fuente base de Porcentaje a Em (es decir, cuerpo (tamaño de fuente: 1em;)), probablemente no notará la diferencia. Veamos qué sucede cuando el tamaño de fuente para el cuerpo es 1em y cuando el cliente cambia la configuración de "Tamaño de texto" del navegador (esta configuración está disponible en algunos navegadores, como Internet Explorer).
Cuando el tamaño del texto en el navegador del cliente se establece en "medio", no hay diferencia entre Em y Porcentaje. Pero si cambia esta configuración, la diferencia será bastante notable. Con la configuración Más pequeña, los Ems son mucho más pequeños que los Porcentajes. Y con la configuración "Más grande", ocurre lo contrario: Em es mucho mayor que Porcentaje. Se podría decir que las unidades Em están escaladas como deberían, pero en la práctica dicho texto está escalado demasiado y en algunos dispositivos el texto más pequeño se vuelve ilegible.
Conclusión
En teoría, la unidad Em es el nuevo estándar para tamaños de fuente en documentos web, pero en la práctica resulta que la unidad Porcentaje es más fácil de usar. Cuando la configuración del cliente cambia, el texto que utiliza la unidad Porcentaje se escala adecuadamente, lo que permite a los diseñadores mantener la legibilidad, la accesibilidad y el diseño visual.
Ganador: porcentaje (%).
Normalmente, cuando creo un nuevo diseño, uso porcentajes para el elemento del cuerpo (cuerpo (tamaño de fuente: 62,5%;)) y luego uso ems para escalar aún más. Siempre que la configuración del cuerpo esté configurada en Porcentaje, puede usar Porcentaje o Em para cualquier otra regla y selector de CSS y aún así aprovechar los beneficios de usar Porcentaje como su tamaño de fuente principal.
En los últimos años, esta práctica se ha vuelto muy común en el diseño web.
Los píxeles ahora se utilizan como unidades válidas de tamaño de fuente (los usuarios pueden utilizar la función de "zoom" del navegador para leer texto pequeño). Sin embargo, el uso de píxeles se vuelve problemático debido a los dispositivos móviles con pantallas con densidades de píxeles muy altas (algunos dispositivos Android y iPhone tienen una densidad de 200 a 300 píxeles por pulgada, lo que dificulta la lectura de fuentes de 11 y 12 píxeles). Por lo tanto, sigo usando Porcentaje como tamaño de fuente principal para documentos web.
CSS utiliza unidades absolutas y relativas para dimensionar varios elementos. Las unidades absolutas son independientes del dispositivo de salida, pero las unidades relativas definen el tamaño de un elemento en relación con el valor de otro tamaño.
Unidades relativas
Las unidades relativas se suelen utilizar para trabajar con texto. en la mesa 1 enumera las principales unidades relativas.
La unidad em es un valor mutable que depende del tamaño de fuente del elemento actual (el tamaño se establece mediante la propiedad de estilo de tamaño de fuente). Cada navegador tiene un tamaño de texto incorporado que se utiliza cuando este tamaño no se especifica explícitamente. Por lo tanto, inicialmente 1em es igual al tamaño de fuente predeterminado del navegador o al tamaño de fuente del elemento principal. La notación porcentual es idéntica a em, en que los valores de 1em y 100% son iguales.
La unidad ex se define como la altura del carácter "x" minúscula. ex está sujeto a las mismas reglas que em , es decir, que está vinculado al tamaño de fuente predeterminado del navegador o al tamaño de fuente de su elemento principal.
La unidad ch es igual al ancho del carácter "0" del elemento actual y, como em, depende del tamaño de fuente.
La diferencia entre em y rem es la siguiente. em depende del tamaño de fuente del elemento principal y cambia con él, y rem está vinculado al elemento raíz, es decir, el tamaño de fuente especificado para el elemento html.
También hay un grupo de unidades relativas vinculadas al tamaño de la ventana gráfica del navegador. en la mesa 2 muestra una lista de ellos con una descripción.
Unidades absolutas
Las unidades absolutas representan dimensiones físicas: pulgadas, centímetros, milímetros, puntos, picas y píxeles. Para dispositivos con bajos ppp (el número de píxeles por pulgada determina la densidad de píxeles), el enlace es por píxel. En este caso, una pulgada equivale a 96 píxeles. Obviamente, la pulgada real no coincidirá con la pulgada de dicho dispositivo. En dispositivos con alto DPI, la pulgada real es la misma que la pulgada en pantalla, por lo que el tamaño de píxel se calcula como 1/96 de pulgada. en la mesa 3 enumera las unidades absolutas básicas.
Ejemplo
encabezado de 30px
Tamaño del texto 1,5 em
titular de 24 puntos
Desplazar el texto hacia la derecha 30 milímetros
Nota
Al configurar las dimensiones, asegúrese de especificar las unidades de medida, por ejemplo, ancho: 30 px. De lo contrario, el navegador no podrá mostrar el resultado deseado porque no comprende qué tamaño necesita. Las unidades no se suman sólo cuando el valor es cero (margen: 0).
Internet Explorer admite la unidad vm en lugar de vmin.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
- Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
- Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
- Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
- Borrador ( Borrador de especificación) - el primer borrador de la norma.
