Após aparecer a janelinha de auto-complete, me deparei com o seguinte:
e logo me questionei: por que o CSS tem tantas unidades de medidas diferentes?
Após aparecer a janelinha de auto-complete, me deparei com o seguinte:
e logo me questionei: por que o CSS tem tantas unidades de medidas diferentes?
É porque não temos só uma "mídia de exibição", vc pode ter que configurar uma página web para saída de impressão, como qualquer projeto tipográfico para vc ter mais controle do como um PX
de tela vai aparecer no papel vc pode fazer um @media print {}
e usar unidades de medida para impressão. A vantagem disso é garantir que tanto na tela quanto na impressão vc vai entregar uma boa experiencia de leitura para o usuário.
Vários softwares de "impressão" como o Corel por exemplo, trabalham com medidas em Pontos ou Centimentros/Milímitros, etc. Esse é só um exemplo para impressão. Ainda existem formas de vc configurar a página de impressão usando o @page,
e nessa at rule
vc pode definir o tamanho da página, se é A4
ou A5
por exemplo, e ainda definir as margens em CM
ou MM
por exemplo
@page {
size: A4;
}
@page :left {
margin-right: 200pt;
}
@page :right {
margin-left: 2cm;
}
O exemplo acima foi basicamente para impressão, mas imagina que vc vai ter em um algum comércio algo tipo um tablet que o usuário apenas pode interagir com a tela, e essa tela não tem scroll, ou mesmo barra de navegação. Para um sistema desse tipo vc pode usar as medidas de viewport
por exemplo (vw, vh, vmin, vmax
). Assim vc garante que a tela vai ocupar 100% da área visível do dispositivo.
Para esses tipos de dispositivos mais "flexíveis", que podem variar a orientação e mudar de tamanho de tela a todo o momento é interessante usar medidas relativas. Se são muitas ou poucas as opções de medida do CSS eu não sei... o importante é saber quais usar para cada tipo de problema. Em uma interface em que o usuário vai usar muito o zoom do browser vc pode adotar medidas em px
, já para telas onde o usuário não pode dar zoom seria legal medidas relativas.
Basicamente podemos definir as unidades de medidas em duas categorias:
1. Medidas absolutas : Mesmo com telas diferentes elas aparecerá exatamente com esse tamanho.
cm
mm
in
px
pt
pc
2. Medidas relativas Seu tamanho é relativo podendo variar de acordo com o tamanho da tela ou equipamento ( muito usada para layouts responsivos )
em
ex
ch
rem
vw
vh
vmin
vmax
As diferentes unidades nos ajuda a definir diferentes tipos de parâmetros, por exemplo:
Caso esteja redimensionando uma imagem no CSS que temos seu tamanho e px, dependendo da aplicação desta imagem no layout será mais conveniente definir seu tamanho em px, mas caso queira definir seu tamanho em relação a um elemento o melhor será definir em em.
Outro exemplo seria um texto, fica mais fácil definir na maioria das vezes em pt, principalmente se for algum texto com finalidade de impressão.
Então cada unidade de medida tem seu propósito de facilitar dependendo do tipo que aplicação que quer definir.