Las unidades de medida son una cantidad estandarizada de una determinada magnitud (tamaño o proporción) y confieren diferentes propiedades a los elementos según si sin absolutas o relativas.
Estas unidades acompaña los valores numéricos de diferentes propiedades CSS como: font-size, width, height, margin, padding, etc.
Define el valor de la propiedad de un elemento en referencia a una medida real e inalterable y que no depende de la medida que pueda tener su elemento contenedor.
Su valor es directamente el valor indicado.
*p{
font-size: 32px;
}*
Definen su valor real en relación con otra medida definida anteriormente (en la propiedad de su elemento contenedor u ancestro); por tanto van a cambiar dependiendo las circunstancias.
*p{
font-size: 32rem;
}*
Las unidad absoluta por excelencia es el pixel (px) y las unidas relativas más utilizadas es el porcentaje(%), 'em', 'rem', 'vw' y 'hw'. Pero es de recordar que al momento de renderizar el navegador siempre expresará las unidades relativas en pixeles.
«Para lograr un RWD es muy recomendable el uso de medias queries, pero no son necesariamente obligatorias, basta un uso adecuado e inteligente de las unidades de medidas; evitando las unidades absolutas e implementando más las unidades relativas.»
«Propiedades como min-width, max-width, min-height, max-height; son muy útiles en el RWD.»
Tamaño que toma un elemento con referencia al tamaño del elementos padre, con un valor del 100% el elemento ocupará todo el espacio disponible de su elemento contenedor, con un valor del 50% ocupara la mitad del tamaño disponible de su elemento contenedor. Puede ser usada en cualquier propiedad CSS que requiera valores de longitud (padding, margin, height, width).
<!-- Contenedor reponsived basico-->
<html>
<head>
<style>
.container{
background: green;
width: 75%;
max-width: 640px;
min-width: 320px;
/*margin:0 auto;*/
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sagittis magnis enim,
integer ac metus pulvinar ornare varius vel porta facilisis sollicitudin,
malesuada maecenas vehicula tincidunt turpis id lacus aenean nibh.
Enim malesuada non magnis quis commodo odio vehicula sollicitudin,
luctus nam nisi pellentesque cras in convallis, quam montes aliquet velit
magna posuere neque. Lacus fermentum magnis natoque cursus a sollicitudin
sociosqu mattis ridiculus vehicula, sodales blandit felis urna a class risus.
</p>
</div>
</body>
</html>
Son unidades de medida relacionadas con el tamaño de fuente, em su valor esta relacionado con el tamaño de fuente del contexto, rem su valor esta relacionado con el tamaño de fuente del root (raíz del documento HTML)