Para quem trabalha com desenvolvimento front-end, entender essas unidades faz toda a diferença para criar layouts responsivos e que se adaptam a qualquer tela. Vamos dar uma olhada rápida nas principais:
👉 px (Pixels)
O famoso "pixel" é uma unidade fixa e absoluta, ou seja, não muda. Ele é ótimo quando você precisa de um tamanho exato e quer que o elemento fique igualzinho em qualquer dispositivo. Exemplo: font-size: 16px;
👉 em
Aqui as coisas começam a ficar interessantes! O em é uma unidade relativa, ou seja, seu valor depende do tamanho da fonte do elemento pai. Isso faz com que o em seja super útil para criar layouts flexíveis. Exemplo: se o tamanho base é 16px, 2em será 32px. Tudo depende do contexto! 😊
👉 rem (Root EM)
O rem é parecido com o em, mas ao invés de se basear no elemento pai, ele usa o tamanho da fonte do elemento raiz (o ). Isso ajuda a manter tamanhos consistentes pelo site. Se o tem font-size: 16px, então 1rem sempre vai ser 16px.
👉** vh (Viewport Height)**
Essa unidade é baseada na altura da tela (viewport). 1vh representa 1% da altura visível da tela. É ótima para definir elementos que ocupem uma parte específica da altura da janela, como um banner que cubra a tela inteira (height: 100vh;).
👉 vw (Viewport Width)
Parecida com o vh, mas baseada na largura da tela. 1vw equivale a 1% da largura da tela, e é muito usada para criar elementos que ocupem toda a largura da janela (width: 100vw;).
Resumo de quando usar:
px: Para tamanhos fixos e específicos.
em: Quando você quer que o elemento seja flexível e dependa do contexto.
rem: Para manter uma consistência global (como em tamanhos de fonte).
vh e vw: Para elementos que precisam se ajustar ao tamanho da tela, como layouts full-screen.
Essas unidades são o segredo para criar interfaces que se adaptam a diferentes dispositivos.
Top comments (0)