Neste artigo, exploraremos diferença de vh para porcentagem (%) no CSS, fundamental entre as unidades e como elas afetam o dimensionamento de elementos em uma página da web.
Conteúdo
Unidade de Medida “vh” (Viewport Height)
Em resumo, a unidade “vh” no CSS representa a porcentagem da altura da viewport, ou seja, a parte visível da janela do navegador. Então, ela é uma unidade de medida relativa à altura do dispositivo do usuário. Por exemplo, 1vh é igual a 1% da altura da viewport.
Unidade de Medida “vw” (Viewport Width)
Para mais contexto, també podemos dizer que a unidade “vw” no CSS, por outro lado, representa a porcentagem da largura da viewport, ou seja, a parte visível da janela do navegador em relação à largura do dispositivo do usuário. Logo, similar ao “vh,” 1vw é igual a 1% da largura da viewport.
- vh: Mede em relação à altura da viewport.
- vw: Mede em relação à largura da viewport.
Unidade de Medida “%” (Percentagem)
Em resumo, a unidade “%” é uma medida relativa que se baseia no elemento pai. Por exemplo, quando você aplica “%” a um elemento, ele calcula a porcentagem com base na largura ou altura do elemento pai.
- %: Mede em relação à altura ou largura do elemento pai.
Exemplo da diferença de vh para porcentagem no CSS com um Botão Redimensionável
.button {
width: 50%; /* 50% da largura do elemento pai */
height: 5vh; /* 5% da altura da viewport */
}
Principais diferença de vh para porcentagem “%”
Agora, vamos destacar as principais diferenças entre as duas unidades:
Referência de Medição
- vh: Mede em relação à altura da viewport.
- %: Mede em relação à altura ou largura do elemento pai.
Comportamento Responsivo
- vh: Mantém o dimensionamento em relação à altura da viewport, tornando-o útil para elementos que devem permanecer proporcionais à altura da tela.
- %: Ajusta-se com base no elemento pai, tornando-o adequado para layouts que dependem do tamanho do elemento pai.
Uso Comum
- vh: Ideal para definir tamanhos de tela de fundo, imagens de capa ou elementos que devem preencher a tela inteira verticalmente.
- %: Usado para layouts responsivos e redimensionáveis, onde as dimensões são relativas ao tamanho do contêiner pai.
Exemplos de uso
Aqui estão alguns exemplos práticos para ilustrar as diferenças:
Exemplo 1: Imagem de Fundo
.header {
height: 100vh; /* Preenche 100% da altura da viewport */
}
Exemplo 2: Layout Responsivo
.container {
width: 80%; /* 80% da largura do elemento pai */
}
Conclusão
Em suma, a escolha entre usar “vh” ou “%” no CSS depende do comportamento desejado para o dimensionamento de elementos em seu layout. Pois, o uso adequado dessas unidades de medida contribuirá para uma experiência de usuário mais consistente e responsiva em seu site ou aplicativo web.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
