Quando você está iniciando uma jornada de design da web, uma coisa fica clara: dominar como os elementos escalam e tamanho corretamente em telas diferentes é crucial. Esteja você trabalhando em uma tela de desktop enorme ou no menor telefone celular, a chave para fazer com que um design pareça bom em todos os lugares é entender as unidades de tamanho do CSS. Mas o que exatamente eles são? E como você pode fazê -los funcionar a seu favor? Vamos quebrá-lo e ajudá-lo a tirar o máximo proveito dessas ferramentas que mudam o jogo.

Por que as unidades de tamanho CSS são importantes

As unidades de tamanho CSS são a espinha dorsal da capacidade de resposta do seu design. Essas unidades definem o quão grande ou pequeno um elemento deve aparecer em relação aos outros ou à própria Viewport. É como a fórmula mágica que informa ao seu site como se comportar em diferentes tamanhos de tela. Sem essas unidades, seu design pode acabar parecendo estranho, esticado ou muito apertado em determinados dispositivos.

Mas aqui está a coisa: existem diferentes tipos de unidades de tamanho, e nem todas elas são iguais. Alguns são fixos, enquanto outros mudam com base na tela ou no conteúdo circundante. Vamos mergulhar nessas unidades para que você possa escolher o certo para o trabalho.

Unidades absolutas vs. relativas: qual é a diferença?

Para entender as diferentes unidades de tamanho, você primeiro precisa saber as duas categorias básicas em que se enquadram: unidades absolutas e relativas.

• unidades absolutas são bem diretas. Eles são consertados e não mudam, independentemente do tamanho da tela. Pense neles como um governante que nunca muda.
• unidades relativas, por outro lado, mudam com base no ambiente em que são usadas. É aí que entra a flexibilidade e é o que torna possível o design responsivo. Vamos dar uma olhada nas duas categorias.

Unidades absolutas: o caminho da velha escola

unidades absolutas são exatamente o que parecem - coloque em pedra. Eles não se importam com o tamanho da tela, o layout ou qualquer outro fator. Quando você usa unidades absolutas, está bloqueando o tamanho dos elementos. Embora isso lhe dê um controle total, também significa que seu design pode não se adaptar bem a telas diferentes.
Aqui estão algumas das unidades absolutas mais comuns:

• pixels (px): A escolha clássica para o dimensionamento preciso. Um pixel corresponde a um ponto na tela.
• centímetros (cm), milímetros (mm), polegadas (in): Essas unidades são mais comuns para projetos de impressão, mas podem ser usados ​​no web design, se necessário.
• pontos (pt), picas (pc): emprestado do mundo impresso, eles são úteis para coisas como estilos de impressão, mas não usados ​​com frequência para design da web. Embora as unidades absolutas possam ajudar a fazer as coisas parecerem nítidas, elas não oferecem muita flexibilidade para sites responsivos modernos. E é aí que as unidades relativas intervêm.

Unidades relativas: o poder real da flexibilidade

unidades relativas são onde a mágica acontece. Essas unidades escalam com base no conteúdo circundante ou no tamanho da tela, tornando -as perfeitas para criar designs que parecem ótimos em todos os lugares, de telas pequenas a enormes monitores.
Vamos dar uma olhada nas principais unidades relativas:

Porcentagens (%)

A unidade de porcentagem tem tudo a ver com flexibilidade. Se você definir a largura de um elemento para 50%, ele levará metade do tamanho de seu contêiner pai, não importa o quão grande ou pequeno seja esse contêiner. É ideal para layouts responsivos, onde você deseja que as coisas ajustem com base no espaço disponível.

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

Em e Rem: escalar com texto

As unidades EM e REM são baseadas no tamanho da fonte, mas elas funcionam de maneira diferente:

• em relação ao tamanho da fonte do elemento pai.
• REM é relativo ao tamanho da fonte definido no elemento raiz (). Essas unidades são perfeitas para criar tipografia ou espaçamento escalável que parece consistente em todo o site, especialmente quando os usuários alteram o tamanho da fonte padrão do navegador.

html {
  font-size: 16px; /* Set base font size */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1.5em; /* 24px, based on the parent element's font size */
}

Unidades de viewport (VW, VH)

As unidades de viewport são fantásticas para criar seções ou elementos de tela cheia que ajustam com base no tamanho real da janela do navegador. Essas unidades escalam de acordo com a largura ou a altura da viewport, para que você possa projetar seções de herói em tela cheia ou tipografia dinâmica que responda ao tamanho da tela do usuário.

• vw: 1vw é 1% da largura da viewport.
• vh: 1vh é 1% da altura da viewport. Estes são especialmente úteis para layouts modernos e fluidos.

.hero {
  width: 100vw; /* Full width of the viewport */
  height: 100vh; /* Full height of the viewport */
}

Qual unidade você deve usar?

Então, como você decide qual unidade usar para o seu design? Aqui estão alguns ponteiros:

• para elementos fixos: use PX quando precisar de controle absoluto. Coisas como ícones, fronteiras e outros pequenos elementos que precisam de dimensões precisas são perfeitas para pixels.
• para layouts de fluido: use % quando deseja que os elementos se adaptem com base no tamanho do contêiner. Isso é ótimo para grades, colunas ou seções que devem escalar ou diminuir com o tamanho da tela.
• para tipografia: use REM para consistência em seu site e em para ajustes locais com base no tamanho da fonte do contêiner pai.
• para seções de tela cheia: use VW e VH para criar seções que ocupam todo o tamanho da viewport, independentemente das dimensões da tela.

Erros comuns para evitar

até designers experientes às vezes cometem erros ao usar unidades de tamanho CSS. Aqui está o que observar:

1. confiando demais em pixels: enquanto o PX é fácil de usar, não ajuda muito para design responsivo.
2. ignorando o tamanho da fonte raiz: se você estiver usando o REM, certifique -se de definir um tamanho de fonte base no elemento HTML. Caso contrário, sua tipografia pode parecer inconsistente.
3. Uso inconsistente da unidade: Misturar PX, %e EM sem uma estratégia clara pode levar a resultados imprevisíveis. Mantenha o uso da sua unidade consistente.

Encerrando: unidades de tamanho CSS

As unidades de tamanho CSS são essenciais para a criação de sites que funcionam bem em qualquer tela. Com unidades absolutas como PX e flexíveis como %, EM, REM e unidades de viewport, você pode projetar layouts responsivos que se adaptem lindamente entre os dispositivos.

A chave é entender quando usar cada unidade e como elas interagem entre si. Ao dominar as unidades de tamanho do CSS, você desbloqueia todo o potencial de design da web responsivo e criará sites que parecem incríveis em todos os lugares.
Então, saia lá, experimente essas unidades e torne seus designs mais fluidos e responsivos do que nunca!
Feliz design!