9

Estou com dúvidas na hora de usar as unidades de tamanho vw, em, %. Pesquisando pela internet sempre vi que uns usavam umas ou outras unidades de tamanho, mas nunca entendi bem a diferença entre elas. Por exemplo, eu não saberia explicar em que situação seria melhor eu usar uma ou outra.

Na criação de um site/sistema responsivo, qual delas é a melhor opção para tal oportunidade?

O que quero entender são as diferenças que existem entre elas e se possível o melhor uso de cada uma em determinada situação

1

2 Respostas 2

11

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

6

A unidade vw utiliza a largura do viewport ou navegador como base de medida, sendo 1vw equivalente a 1/100 da largura do navegador. Por exemplo se a largura do navegador é 900px, 1vw é igual a 9px.Ela é utilizada tanto para medidas de layout como de fontes. Já a unidade % é utilizada mais para definir o layout dos elementos da página, para que eles reajam de acordo com o tamanho do viewport. E o em é utilizado normalmente para as fontes, mas também pode ser utilizada para definir alguns detalhes do layout como a margin dos elementos. Por exemplo, caso queira que o elemento tenha uma margin de 2x o tamanho da fonte relativa, você pode usar margin:2em;.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .