CSS => Unidades de longitud

Introducción

Una medición de distancia CSS es un número seguido inmediatamente por una unidad de longitud (px, em, pc, in, ...)

CSS soporta una cantidad de unidades de medidas de longitud. Son absolutos o relativos.

Sintaxis

unidad de valor
1em

Parámetros

Unidad	Descripción
%	Defina tamaños en términos de objetos principales o de objetos actuales que dependen de la propiedad
em	Relativo al tamaño de fuente del elemento (2em significa 2 veces el tamaño de la fuente actual)
movimiento rápido del ojo	Relativo al tamaño de fuente del elemento raíz
vw	Relativo al 1% del ancho de la ventana gráfica *
vh	Relativo al 1% de la altura de la ventana gráfica *
vmin	Relativo al 1% de la dimensión más pequeña de la vista *
vmax	Relativo al 1% de la dimensión mayor de la ventana gráfica *
cm	centímetros
mm	milimetros
en	pulgadas (1in = 96px = 2.54cm)
px	píxeles (1px = 1 / 96th of 1in)
pt	puntos (1pt = 1/72 de 1in)
ordenador personal	picas (1pc = 12 pt)
s	segundos (utilizados para animaciones y transiciones)
Sra	milisegundos (utilizados para animaciones y transiciones)
ex	Relativo a la altura x de la fuente actual
ch	Basado en el ancho del cero (0) caracter
fr	unidad fraccionaria (utilizada para el diseño de cuadrícula CSS)

Observaciones

Un espacio en blanco no puede aparecer entre el número y la unidad. Sin embargo, si el valor es 0, la unidad puede omitirse.
Para algunas propiedades CSS, se permiten longitudes negativas.

Tamaño de letra con rem

CSS3 presenta algunas unidades nuevas, incluida la unidad rem , que significa "root em". Veamos cómo funciona rem .

Primero, veamos las diferencias entre em y rem .

em : Relativo al tamaño de fuente del padre. Esto causa el problema de la composición.
rem : Relativo al tamaño de fuente de la raíz o elemento <html> . Esto significa que es posible declarar un tamaño de fuente único para el elemento html y definir todas las unidades rem como un porcentaje de eso.

El problema principal con el uso de rem para el tamaño de fuente es que los valores son algo difíciles de usar. Este es un ejemplo de algunos tamaños de fuente comunes expresados en unidades rem , suponiendo que el tamaño base es 16px:

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18 px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

CÓDIGO:

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

Creando elementos escalables usando rems y ems.

Puede utilizar rem definido por el font-size del html etiqueta para elementos de estilo configurando sus font-size a un valor de rem y el uso de em en el interior del elemento para crear elementos que escala con el mundial font-size .

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

CSS relevante:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

Resultado posible:

vh y vw

CSS3 introdujo dos unidades para representar el tamaño.

vh , que representa la viewport height es relativa al 1% de la altura de la ventana gráfica
vw , que significa viewport width es relativo al 1% del ancho de ventana gráfica

div { 
  width: 20vw; 
  height: 20vh;
}

Arriba, el tamaño de la división ocupa el 20% del ancho y la altura de la ventana gráfica.

vmin y vmax

vmin : Relativo al 1 por ciento de la dimensión más pequeña de la ventana gráfica
vmax : Relativo al 1 por ciento de la dimensión más grande de la ventana gráfica

En otras palabras, 1 vmin es igual al menor de 1 vh y 1 vw

1 vmax es igual al mayor de 1 vh y 1 vw

Nota : vmax no es compatible con:

cualquier versión de Internet Explorer
Safari antes de la versión 6.1

usando porcentaje%

Una de las unidades útiles al crear una aplicación receptiva.

Su tamaño depende de su contenedor padre.

Ecuación:

(Ancho del contenedor principal) * (Porcentaje (%)) = Salida

Por ejemplo:

El padre tiene un ancho de 100px mientras que el niño tiene el 50% .

En la salida , el ancho del niño será la mitad (50%) del de los padres , que es 50px .

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

SALIDA

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

CSS
Unidades de longitud

Buscar..