Unidad de medida em html. El poder de la unidad em en CSS. Unidades de medida dependientes de la fuente

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 Me opongo al uso de estas unidades para especificar tamaños de fuente; pueden resultar muy útiles para trabajar con elementos de diseño.

Unidades de ventana gráfica

Unidades medidas de la ventana gráfica son unidades relativas, esto 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 de un elemento en 100vw, entonces el elemento se extenderá más allá límites de html y cuerpo. V en este ejemplo Hice un borde rojo alrededor del elemento html y llené 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 poder hacer elemento html padre, o recurrir al uso de algún tipo de 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 imagen de fondo, que abarca 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.

Unidades Dimensiones CSS jugar papel importante en la creación y dimensionamiento de sitios web varios elementos. valores CSS puede expresarse como positivo o números negativos, aunque algunas propiedades sólo aceptan números positivos. El valor numérico va acompañado de una abreviatura de dos letras que representa la unidad de longitud real. Por ejemplo, cm (centímetros), px (píxeles) o em CSS. La excepción a esta regla es el valor 0 (cero), que no requiere unidad de medida.

Las unidades CSS vienen en dos tipos: absolutas y relativas.

Unidades de longitud absoluta en CSS

Las unidades CSS absolutas no son adecuadas para el diseño web. Representan una designación digital de los resultados de medición en mundo fisico y no depende del tamaño y la resolución de la pantalla. Longitudes absolutas con el mismo valor pueden diferir por diferentes pantallas. Esto se debe a diferencias en los DPI (puntos por pulgada) de la pantalla.

Las pantallas de alta resolución tienen un DPI más alto que las pantallas de menor resolución, lo que hace que las imágenes y el texto parezcan más pequeños. Las unidades absolutas se utilizan para definir estilos en la impresión, donde las medidas se producen en pulgadas, puntos y pica.

Unidades absolutas de longitud:

• cm (centímetros);
• mm (milímetros);
• en (pulgadas);
• pc(picos);
• pt(puntos);
• px (píxeles).

Mayoría unidades absolutas Las longitudes son inútiles en Internet. La única excepción es px. Los píxeles son unidades relativas en relación a la resolución de las pantallas. Para impresoras y monitores con muy resolución alta un píxel en CSS equivale a varios píxeles en la pantalla, por lo que la cantidad de px por pulgada es alrededor de 96. Un píxel es la unidad de medida más pequeña y se usa comúnmente como referencia para otras.

Unidades de longitud relativa en CSS

Las unidades de longitud relativa en CSS no tienen valores fijos. Sus significados dependen de otros. establecer valores o funciones. Son más populares en diseño web porque facilitan la determinación del tamaño de un elemento. Con su ayuda, puede establecer el ancho, alto, tamaño de fuente, etc. en relación con otros parámetros básicos.

Unidades relativas según fuente

Se hace referencia a las unidades relativas dependientes de la fuente de antemano establecer tamaño valor de propiedad de fuente o familia de fuentes:

• ex(altura del carácter x);
• ch( ancho de carácter cero (0));
• unidad em en CSS (altura de fuente del elemento actual);
• movimiento rápido del ojo( tamaño de fuente elemento raíz ).

ex

Definido como “ altura del carácter x de la fuente actual O la mitad 1 em" Es decir, la altura letra minúscula incógnita fuente instalada. Cuando cambia el valor de la propiedad font-family, la unidad ex cambia.

ch

Igual al ancho del carácter 0 . Esta unidad de medida también cambia cuando cambia el valor de la propiedad de la familia de fuentes.

ellos

La unidad CSS em tiene un valor igual al tamaño de fuente del cuerpo o elemento principal. Por ejemplo, si el tamaño de fuente de un elemento principal es 30 px, entonces un valor de 1 em se calculará como 30 px (30 x 1) para todos los elementos secundarios. El número no tiene por qué ser un número entero. Si en el ejemplo reemplazamos 1em por 0,5, entonces el valor será 15px (30 x 0,5).

La unidad em toma el valor etiqueta de padre. Esto puede provocar resultados no deseados al utilizar elementos anidados.

Digamos que tenemos tres elementos anidados. El primer elemento (raíz) tiene un tamaño de fuente de 30 px y los dos elementos anidados tienen un tamaño de fuente de 2 em. El elemento anidado dentro de la raíz tendrá un tamaño de fuente calculado como 60 px (30 x 2). Y el elemento anidado en él tendrá un tamaño de fuente calculado como 120 px (60 x 2).

movimiento rápido del ojo

rem es similar a CSS em, pero su significado siempre permanece igual tamaño fuente del elemento raíz. La unidad rem es útil al desarrollar sitios web responsivos porque le permite escalar toda la página cambiando el tamaño de fuente en el elemento HTML.

Unidades de longitud porcentuales basadas en el tamaño de la ventana gráfica

El área de visualización se basa en el ancho y alto de la ventana gráfica e incluye:

• vh( altura de la ventana gráfica);
• VW( ancho de la ventana gráfica);
• vmín( el más pequeño de (vw, vh));
• vmáx ( mayor de (vw, vh)).

VW

Este es el ancho de la ventana gráfica. 1vw es igual a 1/100 del ancho de la ventana gráfica. Un poco como los porcentajes, excepto que el valor sigue siendo el mismo para todos los elementos independientemente del ancho de sus elementos principales. Por ejemplo, si el ancho de la ventana es 1000px, entonces 1vw será igual a 10px.

vh

Igual que VW ( ancho de la ventana gráfica), solo esta unidad Las medidas dependen de la altura del área de visualización. 1vh es igual a 1/100 de la altura de visualización. Por ejemplo, si la altura de la ventana del navegador es 900 px, entonces 1vh sería 9 px.

vmin

Vmin es igual a 1/100 de valor mínimo entre la altura y el ancho de la ventana gráfica. Es decir, 1/100 del lado de menor longitud. Por ejemplo, si las dimensiones de la ventana 1200 por 800 píxeles, entonces el valor vmin será 8px.

vmáx

vmax es igual a 1/100 de valor máximo entre la altura y el ancho de la ventana gráfica. En otras palabras, 1/100 del lado longitud más larga. Por ejemplo, si las dimensiones fueran 1200 por 800 píxeles, entonces vmax es 12px.

Interés %

La distancia especificada como porcentaje depende de la longitud del elemento principal. Por ejemplo, si un elemento principal tiene 1000 px de ancho y su elemento secundario tiene el 50% de ese valor, entonces el ancho del elemento secundario será de 500 px.

SOPORTE DEL NAVEGADOR

en CSS, ex, px, cm, mm, in, pt y pc

son compatibles con todos los navegadores, incluidas las versiones anteriores de IE.

Debido al hábito común entre los desarrolladores de usar valores de píxeles, no creemos que todos comprendan el verdadero propósito de los parámetros em y cómo funcionan en CSS.

Al compilar algunas guías, de alguna manera tuvimos que lidiar con estos significados, por eso hoy tenemos algo que contarte. Esperamos que nuestra guía de hoy le ayude a abrir el telón de una técnica tan conveniente y bien pensada diseñada para desarrollar proyectos web.

Definición de em

La especificación introduce bastante parámetro em:

Igual al valor de tamaño de fuente calculado aplicado al elemento

Es decir, si tenemos el siguiente código CSS:

Elemento (
tamaño de fuente: 20px;
}
Esto significa que 1em establecido en ese elemento o cualquiera de sus elementos secundarios, será igual a 20 píxeles. .

Si usa el siguiente código:

Elemento (
tamaño de fuente: 20px;
ancho: 4em;
altura: 4em;
}
Esto significa que el ancho y el alto del elemento (especificados aquí como 4em x 4em) serán 80px x 80px (20px * 4 = 80px).

Echemos un vistazo más de cerca

La clave para recordar es el propósito y el origen de em. este parámetro. Siguiente:

Em es una unidad de cambio en la imprenta igual al actual tamaño especificado fuente. El nombre em está asociado con la letra M. Esta unidad se derivó originalmente del ancho mayúscula M cuando se utiliza una fuente específica

La documentación continúa explicando que aunque el nombre originalmente se basaba en el ancho de la letra M, esto ya no importa. Desde hoy la unidad de medida em está asociada al tamaño en puntos de la fuente.

Usando este método Los cálculos no ocurren en un archivo CSS. definición precisa a lo que son. El valor de esta unidad depende de cómo su mesas en cascada estilos. En teoría, si especificaste la longitud de todos los elementos en la unidad em, entonces cambiar el tamaño de fuente por sí solo sería suficiente para "destruir" todo tu marcado de píxeles perfectos.

¿Qué pasa si no uso el parámetro de tamaño de fuente?

En el ejemplo anterior y en el JSBin al que nos vinculamos, el parámetro de tamaño de fuente se especifica exactamente. La unidad em se deriva posteriormente del parámetro "base". Pero, ¿qué pasa si el elemento no está especificado? parámetro exacto tamaño de fuente?

En este caso, dado que el parámetro de tamaño de fuente se hereda en todo el árbol del documento, el valor de la unidad em se derivará del parámetro heredado. Si en todo el documento nunca se menciona el tamaño de fuente, entonces el valor de una sola unidad em será 16 píxeles, que es el valor predeterminado (y no creemos que esto varíe según el navegador).

"rem" debería ser automático para las personas

Es hora de incorporar una nueva incorporación a CSS: . Esta unidad (el nombre se deriva de "root em") es perfectamente compatible con todos los navegadores: IE9+, FF3.6+, Chrome, Safari 5+ y Opera 11.6+.

En general, esta unidad es muy fácil de entender. Le brinda la posibilidad de crear valores unitarios em en todo un documento HTML en función de un valor "maestro" especificado en " HTML"-elemento. De esta manera puedes olvidarte del parámetro de tamaño de fuente, ya que todas las unidades em utilizadas en el documento se basarán en el valor rem principal, por ejemplo:

HTML (tamaño de fuente: 62,5%; )
cuerpo (tamaño de fuente: 1.4rem; ) /* =14px */
h1 (tamaño de fuente: 2.4rem; ) /* =24px */
Y, al igual que con em, si no especifica un valor de tamaño de fuente en " HTML", la unidad "root em" será de 16 píxeles de forma predeterminada.

Carpe Diem

Puedes crear muchas otras expresiones con em :)

Después de trabajar en el desarrollo de sitios web durante muchos años, finalmente podemos alejarnos de los anchos fijos. Aunque muchos ya han pasado al desarrollo diseños adaptativos, todo el mundo sigue utilizando valores de píxeles de vez en cuando. Si bien esto puede ser suficiente para los elementos de la plantilla, creemos que es la tipografía la que debe traducirse completamente a los valores em.

Aunque podamos crear plantilla completa usando unidades em, nos parece que en plantillas adaptativas Aún es mejor usar valores de píxeles y porcentaje y, como ya se señaló, utilícelos para tipografía.

Esperamos que hayas disfrutado nuestro tutorial de hoy y que pongas en práctica lo que has aprendido.

¡No olvides comentar!

Uno de los aspectos más confusos. CSS es la aplicación tamaño de fuente atributo para escalar texto. Usando CSS puedes cambiar el tamaño del texto en el navegador usando cuatro diferentes unidades medidas. ¿Cuál de estas cuatro unidades es mejor para la web? Esta es una cuestión que ha dado lugar a diversas discusiones y críticas. Encontrar una respuesta definitiva es difícil porque la pregunta en sí es compleja.

Conoce las unidades

1. "Ems" (em): "em" es una unidad escalable que se utiliza en documentos web. "em" es igual al tamaño de fuente actual; por ejemplo, si el tamaño de fuente del documento es 12 puntos, 1 em es igual a 12 puntos. "em" es escalable por naturaleza, por lo que 2 em equivaldrán a 24 puntos, 0,5 em equivaldrán a 6 puntos, etc. El uso de "em" se está volviendo cada vez más popular en documentos web debido a su escalabilidad y capacidad de ser utilizado de manera útil en dispositivos móviles Oh.
2. Píxeles (px): "px" tienen tamaño fijo unidades que se utilizan en las pantallas (por ejemplo, para leer en la pantalla de una computadora). Un píxel equivale a un punto en la pantalla de su computadora (el elemento más pequeño de la resolución de su pantalla). Muchos diseñadores web utilizan px en documentos web para lograr una representación perfecta en píxeles de su sitio cuando se muestra en un navegador. Uno de los problemas con el uso de px es que estas unidades no permiten el escalado para lectores o dispositivos móviles con discapacidad visual.
3. Puntos (pt): "pt", utilizado tradicionalmente en medios impresos (cualquier cosa que deba imprimirse en papel, etc.). Un "pt" equivale a 1/72 de pulgada. "pt", como "px", tienen un tamaño de unidad fijo y no se pueden escalar.
4. Porcentajes (%): Las unidades de porcentaje son similares a "em" con algunas excepciones. diferencias fundamentales. Primero, el tamaño de fuente actual es 100% (es decir, 12 puntos = 100%). Al utilizar "%", su texto se vuelve completamente escalable para dispositivos móviles y fácil de usar (accesibilidad).

Entonces, ¿cuál es la diferencia?

Será fácil entender la diferencia entre las unidades de tamaño de fuente una vez que las veas en acción. Normalmente, 1em = 12pt = 16px = 100%. Al usar estos tamaños de fuente, veamos qué sucede cuando aumentas tamaño base fuente (usando Selectores CSS cuerpo) del 100% al 120%.

Cambiar el tamaño de fuente de 100% a 120%.

Como puede ver, "em" y "%" aumentaron el tamaño de fuente, mientras que "px" y "pt" no lo hicieron. Establecer un tamaño absoluto para su texto puede ser fácil, pero es mucho mejor para sus visitantes usar texto escalable que pueda mostrarse en cualquier dispositivo o máquina. Por esta razón, es preferible utilizar las unidades "em" y "%" para el texto de un documento web.

"em" frente a "%"

Descubrimos que las unidades “px” y “pt” no son de la mejor manera posible son adecuados para documentos web, lo que nos obliga a utilizar "em" y "%". En teoría, las unidades "em" y "%" son idénticas, pero en la práctica tienen diferencias menores que es importante considerar.

En el ejemplo anterior, utilizamos porcentajes (en la etiqueta del cuerpo) como unidad base de tamaño de fuente. Si cambia su unidad de tamaño de fuente base de "%" a "em" (es decir, cuerpo (tamaño de fuente: 1em;)), usted, debería no notes la diferencia. Veamos qué sucede cuando "1em" es nuestra unidad base y cuando el cliente cambia el "Tamaño de fuente" en la configuración de su navegador (muchos navegadores, como Internet Explorer, tienen esta opción).

El tamaño de fuente cuando el cliente cambia el tamaño del texto en el navegador.

Cuando el tamaño del texto del navegador del cliente se establece en "medio", no hay una diferencia notable entre "em" y "%". Sin embargo, si se cambia el parámetro, la diferencia se vuelve muy grande. Cuando se establece en "Más pequeño", "em" es mucho más pequeño que "%", y cuando se establece en "Más grande", por el contrario, "em" se muestra mucho más grande que "%". Y aunque muchos argumentan que las unidades en "em" escalan según lo previsto, en la práctica el texto en "em" escala demasiado dramáticamente, lo que hace que el texto más pequeño se vuelva ilegible en algunas máquinas.

Veredicto

En teoría, las unidades "em" son el nuevo estándar de tamaño de fuente en la web, pero en la práctica, las unidades "%" permiten que el texto se muestre de manera más consistente y conveniente para los usuarios. Al cambiar los parámetros del cliente, el texto en "%" cambió en proporciones razonables, lo que permite a los diseñadores mantener la legibilidad, la accesibilidad y el diseño.

Ganador: porcentaje (%).

Un artículo no es necesario.

1 px (píxel)= 1/96 de pulgada, pero no en CSS. 1 px en CSS es un punto en la pantalla del usuario, cantidad fisica que depende de la resolución del dispositivo y de la distancia desde la que una persona mira su superficie ( teléfono móvil o televisión). Independientemente de las unidades de medida en las que escribamos el código, se reduce a px.

1 em= valor del tamaño de fuente principal. Tenga en cuenta que en el polígono debajo el tamaño de fuente de los bloques amarillo y marrón es diferente, pero el tamaño de fuente es el mismo.

16px * 1 = 16px // amarillo 16px * 0.5 = 8px // verde 8px * 2 = 16px // marrón

1 resto= valor del tamaño de fuente (el elemento raíz del documento).

16px * 1 = 16px // amarillo 16px * 0.5 = 8px // verde 16px * 2 = 32px // marrón

1 por ciento (1%)— valor relativo al valor de propiedad de la etiqueta principal.

16px * 100% = 16px // amarillo 16px * 50% = 8px // verde 8px * 200% = 16px // marrón

Cuando se reduce el ancho del padre, también se reduce el ancho del elemento, pero no su fuente.

1vw= 1% del ancho de la ventana. Al reducir el ancho de la ventana, el ancho, el alto y la fuente del elemento disminuyen. La fuente no se escalará al presionar Ctrl + o Ctrl -.

1vh= 1% de la altura de la ventana. Cuando se reduce la altura de la ventana, se reducen el ancho, el alto y la fuente del elemento. La fuente no se escalará al presionar Ctrl + o Ctrl -.

1vmin= 1vw o 1vh. Se selecciona el que sea más pequeño.

1vmáx= 1vw o 1vh. Se selecciona el que es más grande.

tamaño de fuente: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem;

tamaño de fuente: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem;

tamaño de fuente: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem;

función calc()

¿Alguna vez quisiste restar píxeles o ems de porcentajes? Por ejemplo, para. Ahora es posible. La función calc() le permite implementar expresiones matemáticas

Suma (carácter separado por espacios en ambos lados) - resta (carácter separado por espacios en ambos lados) * multiplicación/división

Aquí hay otro gran ejemplo.

• 1
• 2
• 3
• 4