La web es un medio responsivo, pero a veces deseamos controlar sus dimensiones para mejorar la calidad general de la interfaz. Un buen ejemplo de esto es limitar la longitud de las líneas para mejorar la legibilidad. ¿Cómo haría eso en un medio flexible como la web?
Para este caso, puede usar una unidad ch, que es igual al ancho de un carácter "0" en la fuente renderizada a su tamaño calculado. Esta unidad le permite limitar el ancho del texto con una unidad diseñada para ajustar su tamaño, lo que a su vez, permite un control predecible independientemente del tamaño de ese texto. La unidad ch es una de las pocas unidades que son útiles para contextos específicos como este ejemplo.
Números
Los números se utilizan para definir la opacity, line-height e incluso los valores del canal de color en rgb. Los números son enteros sin unidades (1, 2, 3, 100) y decimales (.1, .2, .3).
Los números tienen significado según su contexto. Por ejemplo, al definir line-height, un número es representativo de una ratio si la define sin una unidad de apoyo:
p {
font-size: 24px;
line-height: 1.5;
}
En este ejemplo, 1.5 es igual al 150% del tamaño de fuente en píxeles calculado del elemento p. Esto significa que si la p tiene un font-size de 24px, la altura de la línea se calculará como 36px.
Los números también se pueden utilizar en los siguientes lugares:
- Al configurar valores para filtros:
filter: sepia(0.5)aplica un filtro sepia del50%. - Al configurar la opacidad:
opacity: 0.5aplica una opacidad del50%. - En canales de color:
rgb(50, 50, 50), donde los valores 0-255 son aceptables para establecer un valor de color. Ver lección de color. - Para transformar un elemento:
transform: scale(1.2)escala el elemento en un 120% de su tamaño inicial.
Porcentajes
Al usar un porcentaje en CSS, necesita saber cómo se calcula éste. Por ejemplo, width se calcula como un porcentaje del ancho del elemento principal.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
}
En el ejemplo anterior, el ancho de div p es 150px.
Si establece margin o padding como un porcentaje, serán una porción del ancho del elemento principal, independientemente de la dirección.
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
En el fragmento anterior, tanto margin-top como padding-left se calcularán en 150px.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
Si establece un valor transform como porcentaje, se basa en el elemento con el conjunto de transformación. En este ejemplo, p tiene un valor translateX de 10% y un width del 50%. Primero, calcule cuál será el ancho: 150px porque es el 50% del ancho de su padre. Luego, toma el 10% de 150px, que son 15px.
Dimensiones y longitudes
Si adjunta una unidad a un número, se convierte en una dimensión. Por ejemplo, 1rem es una dimensión. En este contexto, la unidad que se adjunta a un número se denomina en las especificaciones como un símbolo de dimensión. Las longitudes son dimensiones que se refieren a la distancia y pueden ser absolutas o relativas.
Longitudes absolutas
Todas las longitudes absolutas se resuelven contra la misma base, lo que las hace predecibles dondequiera que se utilicen en su CSS. Por ejemplo, si usa cm para dimensionar su elemento y luego imprime, debería ser exacto si lo compara con una regla.
div {
width: 10cm;
height: 5cm;
background: black;
}
Si imprimiera esta página, el div se imprimiría como un rectángulo negro de 10x5cm. Tenga en cuenta que CSS se utiliza no solo para contenido digital, sino también para diseñar contenido impreso. Las longitudes absolutas pueden resultar muy útiles a la hora de diseñar para imprimir.
Longitudes relativas
La longitud relativa se calcula contra un valor base, muy parecido a un porcentaje. La diferencia entre estos y los porcentajes es que puede dimensionar los elementos contextualmente. Esto significa que CSS tiene unidades como ch que usan el tamaño del texto como base y vw que se basa en el ancho de la ventana gráfica (la ventana de su navegador). Las longitudes relativas son particularmente útiles en la web debido a su naturaleza responsiva.
Unidades relativas al tamaño de fuente
CSS tiene unidades útiles que son relativas al tamaño de los elementos de la tipografía renderizada, como el tamaño del texto en sí (unidades em) o el ancho de los caracteres tipográficos (unidades ch).
Unidades relativas a la ventana gráfica
Puede utilizar las dimensiones de la ventana gráfica (ventana del navegador) como una base relativa. Estas unidades reparten el espacio disponible de la ventana gráfica.
div {
width: 10vw;
}
p {
max-width: 60ch;
}
En este ejemplo, el div será el 10% del ancho de la ventana gráfica, porque 1vw es el 1% del ancho de la ventana gráfica. El elemento p tiene un max-width de 60ch que significa que no puede exceder el ancho de 60 caracteres "0" en la fuente y el tamaño calculados.
Unidades misceláneas
Hay algunas otras unidades que se han especificado para tratar tipos particulares de valores.
Unidades angulares
En el módulo de color, analizamos las unidades de ángulo, que son útiles para definir valores de grados, como el tono en hsl. También son útiles para rotar elementos dentro de funciones de transformación.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
Usando launidad de ángulo deg, puede rotar un div 90 ° en su eje central.
div {
background-image: url('a-low-resolution-image.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url('a-high-resolution-image.jpg');
}
}
Unidades de resolución
En el ejemplo anterior, el valor de min-resolution es 192dpi. La unidad dpi significa puntos por pulgada. Un contexto útil para esto es detectar pantallas de muy alta resolución, como pantallas Retina, en una consulta de medios y mostrar una imagen de mayor resolución.
Check your understanding
Test your knowledge of sizing
Which of the following are valid dimensions?
How are absolute and relative units different?
Viewport units are absolute.