Unidades CSS absolutas. Una guía rápida de unidades CSS. Unidades de longitud relativa en CSS

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 del navegador, lo que hace que estas unidades sean ideales para diseño adaptativo. 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, lo que significa que no pueden medirse 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 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, se da en relación con él elemento padre, podemos obtener un elemento con altura igual altura pantalla sólo si su elemento padre también ocupa toda la altura de la pantalla. Esto significa que debemos posicionar el elemento como fijo para que el elemento html sea 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.

Se han agregado nuevas unidades relativas a CSS3 como vh, vw, vmin, vmax. Estas unidades se calculan en relación con el tamaño de la ventana del navegador. Para computadores de escritorio El ancho de la ventana del navegador es mayor que el ancho de la ventana gráfica (se agrega el ancho de la barra de desplazamiento), por lo que si establece el ancho del elemento en 100vw, irá más allá del html.

Arroz. 1. Imagen de fondo de pantalla completa con un ancho de 100vw

Soporte del navegador

ES DECIR: 9.0 excepto vmax, use vm en lugar de vmin
Borde: 12.0 excepto vmax, use vm en lugar de vmin
Firefox: 19.0
Cromo: 26.0
Ópera: 15.0
Safari: 6.1
iOSSafari: 8.0
Androide: 4.4
Cromo para Android: 55.0

1. Unidades vh y vw

Las técnicas de diseño web responsivo se basan en el uso de porcentajes. Pero el interés está lejos de la mejor decision para cada caso, ya que se calculan en relación con las dimensiones del elemento padre más cercano. Por lo tanto, si desea utilizar la altura y el ancho de la ventana del navegador, es mejor utilizar unidades vh y vw. Por ejemplo, si la altura de la ventana del navegador es 900 px, entonces 1vh será 9 px. Del mismo modo, si el ancho de la ventana del navegador es de 1600 px, entonces 1vw será de 16 px.

1.1. Imagen de fondo responsiva de pantalla completa

Dado que el ancho del elemento especificado con 100vw es mayor que el ancho de la ventana gráfica, para crear pantalla completa imágenes de fondo Es mejor usar un ancho del 100%, que será igual al ancho del elemento html raíz.

Pantalla completa-bg (fondo: url(imagen.jpg); posición-fondo: centro; tamaño-fondo: portada; ancho: 100%; alto: 100vh;) Arroz. 2. Imagen de fondo responsiva a pantalla completa

1.2. Efecto de diapositiva de página completa

Para hacer un bloque de toda la altura de la ventana del navegador, debe establecer la altura: 100%; Para tres elementos— html, cuerpo y directamente para el propio bloque:

HTML, cuerpo (altura: 100%;) sección (altura: 100%;)

Porque tamaños porcentuales se calculan en relación con los valores de los elementos principales, luego debe establecer los valores apropiados para cada uno elemento DOM. La unidad de medida vh no requiere encadenar valores, ya que su valor se calcula directamente en relación con la ventana del navegador:

Sección ( altura: 100vh; )

El efecto de pasar las diapositivas al hacer clic en la flecha se implementa usando guión pequeño jQuery:

JQuery(documento).ready(function($) ( $("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(ventana ).scrollTop() + $(ventana).height() ) if ($(this).hasClass("arriba")) ( var movePos = $(ventana).scrollTop() - $(ventana).height( ) $("html, cuerpo").animate(( scrollTop: movePos), 600 ));

La altura especificada con vh también se puede utilizar para centrar un elemento en la página.

Para establecer dimensiones varios elementos, CSS utiliza unidades de medida absolutas y relativas. 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

Unidades relativas generalmente se usa para trabajar con texto, o cuando necesita calcular porcentaje entre elementos. En mesa 1 enumera las principales unidades relativas.

Un valor variable que depende del tamaño de fuente del elemento actual (se establece mediante propiedad de estilo 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 igual al tamaño la fuente predeterminada del navegador. En consecuencia, al configurar el tamaño del texto para toda la página en em, trabajamos con este parámetro. En el caso de que em se utilice para elemento específico, 1em es el tamaño de fuente de su padre.

ex se define como la altura del carácter "x" en 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.

Un píxel es un punto elemental mostrado por un monitor u otro dispositivo similar, por ejemplo, un teléfono inteligente. El tamaño de píxel depende de la resolución del dispositivo y de sus características técnicas.

El ejemplo 1 muestra el uso de estas unidades.

Ejemplo 1: usar unidades relativas

Tamaño 2 em

Talla 2 ex

Tamaño 30 píxeles

Tamaño 200%

Resultado este ejemplo se muestra a continuación (Figura 1).

Arroz. 1. Tamaño del texto con diferentes unidades.

Unidades absolutas

Las unidades absolutas se utilizan con menos frecuencia que las relativas y, por regla general, cuando se trabaja con texto. En mesa 2 enumera las principales unidades de este tipo.

Quizás la unidad más común sea el punto, que se utiliza para indicar el tamaño de fuente. Muchas personas están acostumbradas a establecer el tamaño de fuente en los editores de texto, por ejemplo 12, pero no entienden lo que significa este número. Entonces estos son exactamente los puntos, son nativos. Por supuesto, no son nativos de nosotros, estamos acostumbrados a medir todo en milímetros y unidades similares, pero el punto es quizás el único valor de un sistema de medición no métrico que se usa en todas partes de nuestro país. y todo gracias editores de texto Y sistemas de publicación. El ejemplo 2 muestra el uso de puntos y otras unidades.

Ejemplo 2: usar unidades absolutas

Tamaño 0,5 pulgadas

Tamaño 8mm

Tamaño 24 puntos

El resultado del uso de unidades de medida absolutas se muestra a continuación (Fig. 2).

Arroz. 2. Tamaño del texto con diferentes unidades.

¡Saludos queridos lectores del blog webcodius! Para establecer los tamaños de varios elementos paginas html, CSS tiene unidades de medida. Además, se pueden utilizar unidades tanto relativas como absolutas.

Unidades absolutas conectado con mundo físico y no dependen del dispositivo de salida. Para indicarlos se pueden utilizar las siguientes unidades:

Las unidades absolutas se utilizan con menos frecuencia que las relativas y se utilizan principalmente para establecer el tamaño del texto. Y para indicar el tamaño del texto utilizan principalmente un punto (pt), que se obtiene dividiendo una pulgada en 72 partes. Una pulgada, a su vez, equivale aproximadamente a 25,4 milímetros, respectivamente, un punto equivale aproximadamente a un tercio de milímetro. Un ejemplo de uso de unidades de medida absolutas:

Tamaño 12 milímetros

Tamaño 1 centímetro

Tamaño 1 pulgada

Tamaño 24 puntos

Pico talla 1

Unidades de medida relativas

Para mostrar información en el monitor, es mejor utilizar unidades de medida relativas. Ya que el tamaño físico de los puntos (píxeles) que forman las imágenes en el monitor puede variar dependiendo del tipo y tamaño físico del propio monitor. También el tamaño del píxel depende de resolución establecida pantalla. Unidades relativas básicas:

1 px en CSS, como dijimos anteriormente, este es un punto en la pantalla del usuario, cantidad física lo cual depende de la resolución del dispositivo y de la distancia desde la que una persona mira su superficie.
Al especificar porcentajes, el tamaño se calcula en función del tamaño del elemento principal. Entonces, por ejemplo, si el ancho del elemento principal es 500 px, si especifica ancho: 50%, el ancho del elemento será 250 px.

ellos está vinculado al tamaño de fuente predeterminado del navegador o al tamaño de fuente del elemento principal. A ex es la altura de la letra mayúscula (minúscula) "x" (x) en diseño latino. Es decir, em también está vinculado al tamaño de fuente predeterminado del navegador o al tamaño de fuente del elemento principal. Ejemplos:

Tamaño 20 píxeles

Tamaño 150%

Tamaño 2 em

Talla 2 ex

Resultado:

Además de lo anterior, existe un grupo de unidades relativas ligadas al tamaño del área de visualización del navegador:

Ejemplos de uso:

Volkswagen tamaño 2

Tamaño 2vh

Tamaño 2 vmín

Tamaño 2 vmáx.

función calc()

Se utiliza para especificar un valor calculado. Propiedades CSS, que utilizan un número como valor. En primer lugar, calc se puede utilizar para calcular dimensiones, ángulos y tiempo. Además, la función te permite mezclar diferentes unidades de medida, por ejemplo, el ancho de un div se puede configurar así:

div(
ancho: cálculo (100% - 40px);
}

En este caso, el ancho del div será igual al ancho del elemento principal menos 40 píxeles.

Puede utilizar las siguientes operaciones aritméticas en expresiones:

• + - suma. El carácter está separado por espacios en ambos lados (alto: calc (20% + 50px));
• — — resta. El carácter está separado por espacios en ambos lados (ancho: calc (90% - 10px););
• * — multiplicación (relleno: calc (2em*2););
• / - división. Está prohibido dividir por cero (ancho: calc (100%/4);).

EN Navegadores Firefox hasta la versión 16.0 se admite la función -moz-calc, Chrome hasta la versión 26.0 y Safari desde la versión 6.0 admiten -webkit-calc.

Por ejemplo, en un diseño de sitio web flexible de dos columnas, debemos asegurarnos de que haya una distancia de 50 píxeles entre las columnas en cualquier tamaño de la ventana del navegador. Luego con la ayuda funciones calc esto se hace de la siguiente manera:

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 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 a 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 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 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 valor 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 con 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.

×