CSS - Unidades

Pixels (px)

Pixels (px) são uma unidade de tamanho fixo usada em CSS. Eles não mudam de tamanho em relação a outros elementos ou à área de visualização. Um pixel representa um único ponto na tela.

Ao usar pixels, você especifica um tamanho exato para um elemento. Por exemplo, definir a largura de uma div para 200px a tornará exatamente 200 pixels de largura, independentemente do tamanho ou resolução da tela.

.container {
  width: 300px;
  height: 200px;
  font-size: 16px;
}

Vantagens de usar pixels:

• Controle preciso sobre os tamanhos dos elementos
• Aparência consistente em diferentes dispositivos com a mesma densidade de pixels
• Fácil de entender e usar para iniciantes

Desvantagens de usar pixels:

• Falta de flexibilidade e responsividade
• Podem aparecer muito pequenos ou muito grandes em dispositivos com diferentes densidades de pixels
• Não são escaláveis para usuários que precisam aumentar ou diminuir o zoom

Apesar dessas desvantagens, os pixels ainda são amplamente usados para certos elementos que requerem tamanhos exatos, como imagens, ícones e bordas. No entanto, para tipografia e layout, geralmente é recomendado usar unidades relativas para alcançar melhor responsividade e acessibilidade.

Porcentagens (%)

Porcentagens são unidades no CSS que permitem definir tamanhos e posições de elementos em relação ao seu contêiner pai. O tamanho de um elemento definido em porcentagens será uma fração do tamanho do seu elemento pai.

Para calcular o tamanho real de um elemento usando porcentagens, multiplique o valor percentual pela dimensão correspondente do elemento pai. Por exemplo, se um elemento pai tem uma largura de 500px e seu filho tem uma largura definida como 50%, a largura real do filho será de 250px (50% de 500px).

.pai {
  width: 500px;
}

.filho {
  width: 50%;
  padding: 10%;
}

O filho terá uma largura de 250px (50% da largura do pai) e um preenchimento de 50px (10% da largura do pai).

Em (em)

A unidade em é baseada no tamanho da fonte de um elemento. Um em é igual ao tamanho da fonte do elemento. Se um elemento tem um tamanho de fonte de 16px, então um em é igual a 16px para esse elemento.

Ao usar em para propriedades diferentes do tamanho da fonte, o valor é calculado em relação ao tamanho da fonte. Isso significa que se você alterar o tamanho da fonte, os tamanhos especificados em em também mudarão proporcionalmente.

.container {
    font-size: 16px;
}

.titulo {
    font-size: 2em; /* 32px (2 * 16px) */
    margin-bottom: 1.5em; /* 24px (1.5 * 16px) */
}

O título terá um tamanho de fonte de 32px (2 vezes o tamanho da fonte do seu pai) e uma margem inferior de 24px (1,5 vezes o seu próprio tamanho de fonte).

Rem (rem)

A unidade rem (root em) é similar ao em, mas é sempre relativa ao tamanho da fonte do elemento raiz (html), em vez do tamanho da fonte do próprio elemento. Isso torna os valores rem consistentes em todo o documento, independentemente do nível de aninhamento ou mudanças locais no tamanho da fonte.

Por padrão, a maioria dos navegadores tem um tamanho de fonte raiz de 16px. Então, se você definir o tamanho de um elemento como 1.5rem, ele será calculado como 1.5*16=24 pixels.

html {
   font-size: 16px;
}

.container {
   font-size: 1.2rem; /* 19.2px (1.2 * 16px) */
   padding: 2rem; /* 32px (2 * 16px) */
}

O elemento container terá um tamanho de fonte de 19.2px e um preenchimento de 32px, independentemente do tamanho da fonte do seu pai.

Usar rem para dimensionar e espaçar elementos ajuda a manter a consistência e facilita o redimensionamento de todo o design alterando apenas o tamanho da fonte raiz.

Unidades de Viewport (vw, vh, vmin, vmax)

As unidades de viewport são baseadas no tamanho da área visível de uma página web. Existem quatro unidades de viewport no CSS:

• vw (viewport width): um vw é um por cento da largura do viewport.
• vh (viewport height): um vh é um por cento da altura do viewport.
• vmin (viewport minimum): um vmin é a menor dimensão entre vw ou vh.
• vmax (viewport maximum): um vmax é a maior dimensão entre vw ou vh.

Essas unidades são úteis para criar designs responsivos, pois permitem que os elementos se adaptem automaticamente a diferentes tamanhos de tela.

.hero {
   width: 100vw;
   height: 50vh;
   font-size: 5vmin;
}

O elemento hero terá uma largura igual a 100% da largura do viewport, uma altura igual a 50% da altura do viewport e um tamanho de fonte igual a cinco por cento da menor dimensão entre altura ou largura.

Usando unidades de viewport, você pode criar elementos que se redimensionam proporcionalmente com o tamanho do viewport, tornando seu design mais responsivo e adaptável a diferentes dispositivos e tamanhos de tela.

Ex (ex)

A unidade ex é uma unidade relativa em CSS baseada na altura-x da fonte atual. A altura-x é a altura das letras minúsculas (como "x") em uma fonte, excluindo ascendentes e descendentes. Um ex é igual à altura-x da fonte.

A unidade ex não é tão comum quanto unidades como em ou rem, mas pode ser útil quando você quer dimensionar elementos em relação à altura-x de uma fonte.

Para calcular o valor de ex, multiplique o tamanho desejado pela altura-x da fonte. Se a altura-x de uma fonte for 8px e você quiser que um elemento tenha 3 vezes essa altura, defina seu tamanho como 3ex (que seria 24px).

.container {
  font-size: 16px;
}

.example {
  width: 10ex;
  height: 2ex;
  border: 1px solid black;
}

A largura de .example será dez vezes a altura-x da fonte, e sua altura será duas vezes essa altura.

Ch (ch)

A unidade ch é outra unidade relativa em CSS que representa a largura do caractere "0" (zero) nas fontes atuais. Ela ajuda quando você quer dimensionar elementos com base em caracteres.

Um ch é igual à largura do caractere "0" nas fontes. Isso a torna boa para definir larguras de campos de entrada ou contêineres de texto para acomodar um certo número de caracteres.

Para calcular o valor de ch, multiplique o número desejado de caracteres pela largura do caractere "0" nas fontes. Se o caractere "0" tiver cerca de oito pixels de largura e você quiser que um campo de entrada acomode vinte caracteres, defina sua largura como vinte ch, o que equivaleria a cento e sessenta pixels.

.container {
    font-size: 16px;
}

.input-field {
    width: 20ch;
    padding: 0.5em;
    border: 1px solid #ccc;
}

O .input-field tem uma largura que acomoda aproximadamente vinte caracteres, assumindo que o caractere "0" tenha cerca de oito pixels de largura na fonte escolhida.