As unidades citadas possuem utilização bem parecidas, porém com utilidades bastante distintas, falarei algumas coisas que o Iron Man já disse, contudo, darei um detalhamento mais pormenorizado:
vw, vh, vmin, vmax
Além do vm
, existem essas outras unidades, o mais importante que deve saber sobre elas é sua compatibilidade, que não é a das melhores, porém já estão ganhando um espaço considerável.
O vw
, como já foi dito pelo nosso amigo Iron Man, estabelece uma relação de porcentagem com a Viewport Width, já o vh
bem intuitivamente refere-se a Viewport Height. Além de serem usadas para elementos "quadriláteros" (imgs, divs, etc), podem também ser aplicadas também em textos, para o font-size
. Com isso você consegue que a fonte se adeque dinamicamente ao tamanho do janela. Olhe esse JsFiddle com um exemplo.
Já o vmin
e vmax
estão relacionados com o valor mínimo ou máximo das larguras e alturas, dependendo de qual é o menor e o maior. Por exemplo, se o navegador possui uma largura de 1000px e uma altura de 800px, 1vmin seria 8px e 1vmax seria 10px. Mas se ele foi redimensionado para 800px de largura e altura de 1000px, apesar de terem se invertido largura e altura, o vmin
e vmax
continuam os mesmos.
em, rem
A unidade em
como já é sabido por muitos é utilizada, em sua grande maioria, para textos.
Uma situação para o em
: você deu ao html
e ao body
um font-size: 20px
(este de padrão possui 16px), então todos elementos filhos, consequentemente, terão 20px
. Contudo, você também atribuiu a um <p>
um font-size: 1.4em
. O que isso quer dizer? Quer dizer que esse p
possui um tamanho de fonte igual a 1.4 vezes o fontSize que herdou de seu elemento pai que, no caso, foi o body, ou seja, 1.4 * 20px = 28px
.
Situação para o rem
: se imagine dentro da situação anterior... O parágrafo que possuía um font-size: 1.4em
(28px), agora foi inserido numa div
com um font-size: 30px
. O cálculo atual deverá ser 1.4 * 30 = 48
(30px do elemento pai). Mas se eu quiser que ele herde do elemento-raiz? Como este no caso é o html
(podendo também se o body
) (com font-size: 20px
), basta eu dar ao parágrafo um font-size
de, ao invés de 1.4em
, o 1.4rem
com o rem
. O cálculo voltará a herdar do body
(elemento-raiz).
Porcentagem %
Não há muito o que falar da porcentagem, esta leva em consideração o elemento pai, e vai também variar de acordo com algumas propriedade css
, como o position
.
Assim como o vw
a porcentagem também pode ser aplicada em textos. Por exemplo, caso o elemento pai de um <p>
tenha um font-size: 40px
, e essep
tenha um font-size: 200%
, o tamanho da fonte deste terá o dobro do tamanho da fonte do elemento pai, no caso, 80px.
Resumindo, não terá melhor quando o assunto é responsividade, depende de sua aplicação, do design e da navegação desta. Leia mais sobre este tema e escolha levando em consideração o que achar melhor. Analise os exemplos supracitados e associe-os às suas vivências, assim poderá julgar.
E na minha opinião, os bons breakpoints dos Medias Queries ainda dão pro gasto quando falamos de fonte e responsividade.
Espero que tenha ajudado...