Unidades

%
- position: fixed; : la referencia es el viewport.
- position: absolute; : la referencia es el elemento que lo contiene + su padding, cuya position sea distinta de static.
- position: static; | position: relative; : la referencia es el elemento padre que sea de bloque, sin contar el padding.
em
- Unidad en base al tamaño por defecto de la font-size, es decir, si la font-size es 16px por defecto y establecemos a un elemento font-size: 1.5em, se multiplicará 16x1.5 para obtener su font-size.
- Problema: Por temas de herencia, cuando hay varios tamaños establecidos en em, se pueden ir sobreescribiendo sucesivamente y provocar un lío. Por ello, es conveniente usarlo solo en algún caso puntual y no sobre varios elementos.
- Ejemplo:
  Body = 1em (16px)
  Hijo = 1.3em (16px x 1.3 = 20.8px)
  Nieto = 1.3em (20.8px x 1.3 = 27.04px)
rem
- En este caso, no hay problema de herencia con respecto a los elementos padres.
- Es mejor unidad de medida.
- Al igual que em, se puede aplicar a más propiedades (margin, padding, etc.), no solo a font-size, aunque siempre su referencia es el tamaño por defecto (16px) del font-size del elemento html (navegador).
- Tampoco es necesario convertir todo a rem, por ej en propiedades del estilo de box-shadow, border, border-radius, etc. podemos utilizar px.
- Convertir píxeles a rem: multiplicar por 0.0625
vh
- Se refiere al height del viewport.
- 1px = 0.0753vh
- 1vh = 13.28px
vw
- Se refiere al width del viewport.
- 1px = 0.0747vw
- 1vw = 13.38px

Nota

Windows, Viewport Units & Scrollbars Hiding Scrollbars on Windows machines After adding vw , you probably saw that the scrollbars appeared in case you are working on Windows. This happens as using vw on Windows does not include the scrollbars - vw: 100 is equal to 100% of the viewport width + the scrollbars. On the Mac this is not an issue, but when using Windows it is as the scrollbars are displayed by default. In case you don't want to display these scrollbars, you can use one of these solutions: - Use width: 100% instead of vw: 100 - Add overflow-x: hidden; to the body selector in the shared.css file to hide the horizontal scrollbar (or overflow-y: hidden to hide the vertical scrollbar) Alternatively you could also use the ::-webkit-scrollbar pseudo element. Simply add the following code to the shared.css file: body: :-webkit-scrollbar { width: 0 } To make sure this works correctly on different browsers, you have to add additional code to it. This blog post nicely summarizes all the code needed right here . Make sure to follow these approaches in case you don't want to display the scrollbars on Windows machines.

Unidades

%

em

rem

vh

vw

Nota

Aplicar height: 100%; a un elemento:

Aplicar `height: 100%;` a un elemento: