Diferença de vh para porcentagem (%) no CSS

Indicação
Diferença de vh para porcentagem (%) no CSS

Neste artigo, exploraremos diferença de vh para porcentagem (%) no CSSfundamental 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?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação 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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.