La unidad de tamaño de carácter es. Configuración de dimensiones utilizando unidades vw y vh. Unidades de medida dependientes de la fuente

Unidades CSS Reproducir 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

Unidades absolutas Las dimensiones CSS no son adecuadas para el diseño web. Representan una designación digital de los resultados de medición en mundo físico 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).

La mayoría de las unidades de longitud absoluta 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 alta resolución 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);
• rem ( 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 X 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 archivo principal o elemento padre. 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 de la etiqueta principal. 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 en 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 valor siempre permanece igual al tamaño de fuente del elemento raíz. Unidad medidas remotasú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. En otras palabras, 1/100 del lado con la longitud más corta. 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 del 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.

Las unidades de medida CSS se utilizan para especificar un valor en varias propiedades. Se dividen en absolutos y relativos.

Unidades absolutas

Las unidades de medida absolutas incluyen centímetros (cm), milímetros (mm) y pulgadas (in). Aunque están diseñados para mostrar elementos en una página web de la misma manera, es posible que el navegador no siempre calcule con precisión tamaño físico pantalla o monitor, etc. diferentes dispositivos Los elementos pueden tener diferentes tamaños.

Un cm (tamaño de fuente: 1 cm; ) .one-mm ( tamaño de fuente: 1 mm; ) .one-in ( tamaño de fuente: 1 pulgada; )

Normalmente, estas unidades de medida se utilizan al especificar el tamaño de las páginas de impresión.

Unidades tipográficas

Las unidades de medida tipográficas incluyen puntos (pt) y picos (pc). El punto (1pt) tiene tamaño fijo 1/72" mientras que pica (1 pieza) es 1/6" (1 pieza = 12 puntos). Estas dos unidades de medida son más útiles en estilos escritos para documentos impresos que para su uso en pantallas.

Un punto (tamaño de fuente: 1pt;) .one-pica (tamaño de fuente: 1pc;)

Unidades relativas

Las unidades de medida relativas incluyen píxeles (px) y porcentajes (%). Un porcentaje es una unidad de medida que no tiene nada que ver directamente con el tamaño de fuente de un elemento o el tamaño del elemento en sí. El valor de una propiedad establecida como porcentaje depende directamente del valor de la misma propiedad establecida para el elemento principal. Por ejemplo, el tamaño de fuente se establece en relación con el tamaño de fuente del elemento principal, y la altura y el ancho se expresan como un porcentaje relativo a la altura y el ancho del área de contenido del elemento principal.

Un píxel (tamaño de fuente: 1px;) .uno por ciento (tamaño de fuente: 1%;)

Un píxel es un punto igual a un píxel físico en la pantalla. Sin embargo, los navegadores no siempre calculan con precisión el tamaño de la ventana gráfica en píxeles.

Consideremos últimos modelos portátiles, tablets y smartphones equipados con pantallas de alta resolución. En dichos dispositivos, el navegador no correlaciona la unidad de px con la cantidad de píxeles físicos en la pantalla. En cambio, normaliza la unidad de px para acercar la experiencia de visualización a la de un monitor de escritorio tradicional, con densidades de píxeles que van de 96 a 120 píxeles/pulgada. Como resultado, el navegador de un teléfono inteligente puede dibujar un cuadrado con un lado de 10 px, de modo que haya de 15 a 20 píxeles físicos en cada lado. Esto significa que px también es una unidad de medida relativa.

Unidades relativas dependientes de la fuente

Dos unidades de medida relativas adicionales son em y ex. Em - altura de la fuente actual, ex - altura del carácter "x" en minúscula la fuente especificada.

One-ex (tamaño de fuente: 1ex; ) .one-em (tamaño de fuente: 1em; )

Al igual que los porcentajes, em es una unidad de medida común que se usa comúnmente para establecer el tamaño de fuente del texto en una página web.

CSS3 introduce dos unidades de medida adicionales: rem y ch. Rem: tamaño de fuente del elemento raíz ( ), se puede utilizar en lugar de em para evitar que los tamaños de fuente principal o ancestro afecten el tamaño de fuente del elemento actual.

Un rem (tamaño de fuente: 1rem;)

La unidad ch es igual al ancho del carácter cero (0) en la fuente del elemento. Su uso puede resultar útil para determinar el ancho de un campo que contiene texto, porque 1 canal corresponde aproximadamente a un carácter.

La unidad de canal solo es compatible con Chrome 27+, Firefox 19+ e IE9. Rem es compatible con Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ y Opera 11.6+.

Unidades de ventana gráfica

Las unidades de ventana gráfica incluyen vw (ancho) y vh (alto), que le permiten escalar elementos en relación con la ventana gráfica, que es la parte visible de la página web.

Ancho: 50vw; /* 50% del ancho de la ventana gráfica */ height: 25vh; /* 25% de la altura de la ventana gráfica */

Dos unidades adicionales son vmin y vmax, que especifican el mínimo o valor máximo tamaño del área de visualización.

Ancho: 1vmin; /* 1vh o 1vw, el que sea menor */ height: 1vmax; /* 1vh o 1vw, el que sea mayor */

Las unidades de ventana gráfica relativas son compatibles con Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ y Opera 15+.

Valores unitarios

No es necesario especificar los valores como números enteros; también se pueden especificar como decimales. Algunas propiedades también le permiten especificar valores negativos como valores.

P (tamaño de fuente: 0,394 pulgadas;) /* decimal */ p (margen: -1px;) /* significado negativo */

Tenga en cuenta que el anuncio no funcionará si hay un espacio antes de la unidad de medida o si no se especifica la unidad de medida (excepto valor cero). Si se utiliza cero como valor, se puede omitir la unidad de medida.

P (tamaño de fuente: 1ex; ) /* correcto */ p (tamaño de fuente: 0; ) /* correcto */ p (tamaño de fuente: 0ex; ) /* correcto */ p (tamaño de fuente: 1 ex ; ) /* incorrecto */ p ( tamaño de fuente: 1; ) /* incorrecto */

Siempre que una declaración CSS contiene un error, el navegador lo ignora, mientras que el resto de la declaración continúa funcionando.

Hay varias unidades de medida básicas en CSS: relativa y absoluta. Cuando trabaje con CSS, debe comprender claramente su uso; de lo contrario, trabajar con hojas de estilo en cascada será complejo e incomprensible. Las unidades de medida absolutas se dividen en 5 tipos, las relativas en 4. Debes saber que las unidades de medida absolutas no dependen del dispositivo de salida, es decir. monitores y pantallas, mientras que los relativos determinan el tamaño de un elemento en relación con otro tamaño, es decir monitor, pantalla, elemento padre, etc. Ahora más sobre ellos.

Unidades de medida relativas.

Las unidades de medida relativas se suelen utilizar para trabajar con texto y en diseños "ampliables". La siguiente tabla muestra los principales unidades relativas mediciones.

E. M.

El valor medido depende del tamaño de fuente del elemento actual (se establece mediante el atributo de tamaño de fuente). Cuando no se establece explícitamente, se utiliza el tamaño de texto establecido en el navegador. Por lo tanto, 1 em es inicialmente igual al tamaño de fuente predeterminado en el navegador.

EX

Este argumento se define como la altura del carácter "x" minúscula. Ex está vinculado al tamaño de fuente predeterminado establecido en el navegador; si el elemento principal tiene configurado el atributo "tamaño de fuente", entonces está vinculado a él.

px

Un píxel es 1 punto de resolución de un dispositivo de salida (monitor o pantalla). Aquellos. Si la resolución de su monitor es 1024*768, entonces tendrá 1024 píxeles horizontalmente y 768 píxeles verticalmente. Aquellos. El tamaño de píxel depende directamente de la resolución del dispositivo de salida y de sus características técnicas.

%

La unidad de medida porcentual depende de las dimensiones del elemento principal.

Unidades de medida absolutas.

Las unidades de medida absolutas se utilizan con menos frecuencia y principalmente cuando se trabaja con texto. Las siguientes tablas muestran unidades de medida absolutas.

De estas unidades, sólo se debe describir pt (punto), porque pc es un derivado de pt y no es necesario describir el uso de in, cm y mm.

El punto es la unidad de medida de fuentes más común y utilizada (¿recuerdas cómo configuran el tamaño de fuente en Word u Open Office?).

CSS3 tiene nuevas unidades de medida. (Creo que ya hablé de esto. eng) Ya has oído hablar de px, pt, em y el nuevo rem. Veamos algunos más: vw y vh.

A menudo hay elementos en un diseño que se garantiza que encajarán en la ventana gráfica del navegador. EN caso general Para esto se utiliza JavaScript. Comprobemos el tamaño de la ventana gráfica y cambiemos el tamaño de los elementos en consecuencia. Si el usuario cambia el tamaño de la ventana del navegador, se repite el procedimiento.

Usando vw/vh podemos establecer el tamaño de los elementos en relación con el tamaño de la ventana gráfica. Las unidades vw/vh son interesantes porque 1vw es una unidad igual a 1/100 del ancho de la ventana gráfica. Para asignar a un elemento un ancho igual al ancho de la ventana gráfica, por ejemplo, necesita establecer ancho: 100vw.

¿Cómo se puede utilizar?

Las cajas de luz son un gran candidato para usar vw y vh, ya que generalmente están posicionadas en relación con la ventana gráfica, sin embargo, encuentro que la posición: fijada con valores superior, inferior, izquierda y derecha es más fácil de usar ya que no es necesario configurarla. la altura y el ancho en absoluto.

Puede utilizar las nuevas unidades de medida para establecer los tamaños de los elementos que están en flujo normal. Por ejemplo, puedo publicar capturas de pantalla en la página. La altura de estas capturas de pantalla no debe exceder la altura de la ventana gráfica. Para esto puedo configurar altura máxima imágenes:

Img ( altura máxima: 95vh; )

EN en este caso Configuré la altura en 95vh para dejar algo de espacio cuando estén en la pantalla.

Soporte del navegador

Si rem es compatible con casi todos los navegadores principales, incluido IE9, entonces vale la pena posponer el uso de vw y vh. En este momento solo los apoya explorador de Internet 9.

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).

Miremos 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 letra 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 no se menciona el tamaño de fuente en todo el documento, entonces el valor de una sola unidad em será 16 píxeles, que es el valor predeterminado (y creemos que esto no varía según los navegadores).

"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!