Medidas relativas - CSS

Medidas relativas no CSS

Vi algumas pessoas perguntando sobre quais medidas usar no CSS. Então decidi montar esse post para falar um pouco mais sobre medidas relativas. O píxel é uma medida fixa, ou seja, 16px vai sempre ser 16px em todo lugar. As vezes queremos ser flexíveis por questão de responsividade ou experiência do usuário. Por isso usamos as medidas relativas.

rem

O rem é uma medida relativa à fonte na raiz do código. No caso do HTML, à raiz é a tag <html>. O valor padrão dos browsers para rem é 16px. Porém, é possível alterar esse valor nas preferências do browser. Portanto, ao definir o tamanho da fonte com rem, seu site se adaptará às preferências do browser de cada um, melhorando a experiência do usuário.

em

O em é uma medida relativa à fonte do elemento. Ao definir o font-size de um parágrafo para 21px, por exemplo, 1em é igual à 21px para esse elemento, e para seus descendentes diretos, caso não seja definido o tamanho da fonte deles. É comum usarmos em na margin e padding, pois dessa forma tornam-se flexíveis de acordo com as preferências do usuário.

ch

O ch refere-se ao tamanho de 1 caractere. As vezes, queremos limitar o tamanho de um bloco de texto para q ele não se estenda pela largura inteira da página. Uma forma efetiva de se fazer isso é definir o max-width com a medida ch.

vh

O vh é relativo à altura da tela. Ao definirmos o height de um elemento ou seção com vh, estamos definindo a porcentagem da altura da tela q ele vai ocupar. Por exemplo: 100vh é igual a 100% da altura da tela, 80vh = 80%, etc.

%

A porcentagem é relativa ao elemento pai. Ao definirmos a width de um elemento para 100%, significa que ele vai ocupar 100% da largura do seu elemento pai. É bem útil para responsividade.

Bônus: aspect-ratio

Existe uma medida bem interessante para definirmos o tamanho de vídeos e imagens: o aspect-ratio. Como funciona? Primeiro, definimos a width ou height dessa imagem. Depois, o valor do aspect-ratio será width/height representado por uma fração. Por exemplo:

img {
  width: 250px;
  aspect-ratio: 3/4;
}

Dessa forma, podemos definir uma imagem como 3/4, 16/9, ou a proporção que quiser.

Claro q existem outras medidas, como in, ou ex, mas essas mencionadas no post são as mais utilizadas. Espero ter ajudado a tirar essa dúvida do pessoal. Boa noite.

28 Likes

Muito bom esse post,
aricyrulin parabéns.
Eu mesmo gosto de usar rem que equivale a 16px por default e se adapta melhor as telas.

3 Likes

Ótimo conteúdo @aricyrulin! Muito importante entender e usar as medidas relativas no CSS, ainda mais que hoje praticamnete todas aplicações precisam responsividade.

1 Like

Excelente! Muito explicativo.

1 Like

:clap: :clap: :clap:

1 Like

REM é vida, tópico top.

3 Likes

Lembrando que o aspect-ratio é uma propriedade relativamente recente então pode não funcionar em alguns navegadores (se bem que a compatibilidade já está bem boa no Can I Use).
Caso precisem definir um elemento com um aspect ratio fixo tipo um <iframe> do youtube, um método que funciona muito bem apesar de ser um pouquinho gambiarra é esse mostrado pelo W3 schools

1 Like

Excelente, Jogador!! (Vi que era jogador de futebol em algum post kkkkkk)

3 Likes

Boa @aricyrulin sua postagem foi bem esclarecedora.

1 Like

Post esclarecedor demais, obrigado por compartilhar conhecimento!!

2 Likes

Hahahah grandeee!!! Valeu, abraço :facepunch:

3 Likes

Ótimo conteudo @aricyrulin . Muito obrigado por compartilhar! :smiley:

1 Like

esclarecedor! parabéns

1 Like

Uaal!! Esse “asppect-ratio” eu não conhecia, bem interessante! Vou estudar mais a respeito.
Valeu, mano. Parabéns!

2 Likes

Sim, mano, é importante usar o rem, é uma boa prática para a responsividade e acessibilidade também.

Mas você sabia que tem uma forma de fazer o rem valer 10px? Assim fica mais fácil você fazer cálculos com ele e prever melhor exatamente o tamanho que ele vai ter;
É só você colocar isso no inicio do seu código CSS:

html {
  /* cada 1rem será considero 10px */
  font-size: 62.5%;
}
3 Likes

Em adição ao aspect-ratio, vc pode adicionar um object-fit: cover na imagem. Aí dependendo do ratio, a imagem vai dar um zoom e cortar um pouco, em vez de se esticar e ficar estranha pra cumprir a proporção.

Aprendi essa agora kkk fica aí pro pessoal.

2 Likes

Obrigada pelas informações. :hugs: :clap:t4:

1 Like

Muito bom esse post sobre medidas e CSS. Começando a despertar. Interessante cada vez mais. Obrigada!

1 Like

rem. deveria ser prioritario em relação ao px. então?

1 Like

Tudo depende da situação e do q vc está buscando. Para tamanho de fonte, acredito ser prioritário por essa questão de favorecer a acessibilidade.