Buscar..


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:

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

3

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:

elementos de entrada escalables

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
3
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

introduzca la descripción de la imagen aquí



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow