Unidades de medida absolutas y relativas en CSS

Unidades de medida absolutas y relativas en CSS

Print Friendly, PDF & Email
Unidades de medida absolutas y relativas en CSS
Valora esta entrada
¿Cuál es el tamaño de cada uno de los elementos de una página web?

Encontraremos la respuesta en las unidades de medida.

Las unidades CSS pueden ser absolutas o relativas.

Las unidades absolutas hacen referencia a una medida física inalterable. Por ejemplo los centímetros y/o las pulgadas.

Las unidades relativas dependen de otra medida. Por ejemplo pueden depender del ancho disponible en una pantalla de ordenador. Lo que las hace muy adecuadas para el diseño de páginas web responsive.

Veamos cuales son las principales unidades de medida.

Unidades de medida absolutas

Las unidades absolutas son fijas e invariables independientemente del tamaño de cualquier otro elemento.

Son adecuadas cuando se va a imprimir en formato físico y nos queremos asegurar de las dimensiones en el mundo real.

Su uso no es muy común (al menos hasta dónde un servidor conoce)

CSS acepta:

  • El milímetro, mm
  • El centímetro, cm
  • La incha, in
  • El punto, pt
  • La pica, pc

Unidades de medida relativas

Las unidades relativas son

  • El porcentaje, %. Se define respecto del ancho disponible. Por ejemplo el ancho del contenedor que atrapa una capa. Es común que a esta capa de “orden superior” se le aplique un ancho fijo. Normalmente en píxeles. (hablamos de los px un poco más adelante).
  • em. No sabría decirte de dónde provienen las siglas em. Un em hace referencia al tamaño en px del párrafo. Típicamente 1em equivale a 12pt. 12pt son  16px.

El píxel, ni fijo ni relativo

¿Dónde clasificamos el píxel?

El píxel es la unidad mínima de color que forma una imagen digital.

También es la unidad física mínima que forma una pantalla.

Hace unos años indudablemente era una medida absoluta que dependía del tamaño de píxel en milímetros de las pantallas.

Hoy en día con las llegadas de las pantallas de retina el tamaño absoluto de un píxel ya no está tan claro. Por ejemplo en una pantalla de retina por cada píxel de retina encontramos 2 píxeles convencionales.

Por este motivo hay quién le gusta decir que es una medida absoluta y quién defiende que en realidad es relativa.

En cualquier caso, el px es la medida más utilizada de todas.

Debemos saber que por defecto el tamaño de fuente definido por los principales navegadores es de 16px.

Las medidas de una página web más comunes suelen ser 900px, 1150px, 1300px o 1800px de ancho. (Personalmente siempre me quedo el rango 1150-1300px)

¿Cuanto mide un dedo?

¿Te has preguntado alguna vez cuanto mide un dedo?

Está estudiado que de media suelen ser 72px.

Recursos para profundizar

Esta entrada pretende dar una idea general de como funcionan las medidas en CSS y lo más importante que debemos retener. Son unos apuntes de clase…

Si queréis profundizar os recomiendo pasar (aunque en inglés) por esta lectura del W3C. ¡Recomendadísima!

Hola querido lector,

Espero que esta entrada resumen sobre las medidas te haya sido útil para poner todo en orden.

Como norma, intenta utilizar siempre los pixeles (px) y los porcentajes.

Nos leemos mañana, como siempre, con un nuevo contenido en el blog.

Entradas relacionadas:

Creación de un menú horizontal con sub menú desplegable mediante CSS
- 20
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 39
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 44
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 66
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Selectores CSS. Que son y como usarlos
- 146
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Ejemplo de centrado vertical y horizontal con CSS
- 51
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Colores CSS para web
- 294
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Sintaxis CSS básica. Cómo se escribe el CSS.
- 129
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Box Sizing, como modificar el modelo de cajas convencional
- 76
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Diferencia entre visibility:hidden; y display:none;
- 34
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.