Unidades vw, vh, vmax e vmin no CSS

Indicação
Imagem representando as unidades de medida vw, vh, vmax e vmin em CSS

Nesta postagem, exploraremos as unidades de medida vw, vh, vmax e vmin em CSS e como elas podem ser utilizadas para criar layouts responsivos e flexíveis em suas páginas da web.

Conteúdo

O que são as unidades de medida vw, vh, vmax e vmin?

Unidades VW

Em primeiro lugar, as unidades vw (viewport width) representam uma porcentagem da largura total da janela de visualização. Então, elas são extremamente úteis para dimensionar elementos com base na largura da tela do usuário. Por exemplo, se você definir a largura de um elemento como 50vw, ele ocupará metade da largura da janela, independentemente do tamanho da tela.

Unidades VH

Depois temos as unidades vh (viewport height), funcionam de maneira semelhante às unidades vw, mas se referem à altura da janela de visualização. Portanto, isso permite dimensionar elementos com base na altura da tela. Então, um elemento com uma altura de 30vh ocupará 30% da altura da janela.

Unidades VMAX e VMIN

As unidades vmax e vmin são mais avançadas e proporcionam flexibilidade adicional no dimensionamento de elementos.

  • Unidades VMAX: Elas se ajustam ao valor máximo entre largura e altura. Isso significa que, se a altura da janela for menor do que a largura, um elemento com 80vmax ocupará 80% da largura da janela, independentemente da altura.

  • Unidades VMIN: Se ajustam ao valor mínimo entre largura e altura. Se a largura da janela for menor do que a altura, um elemento com 50vmin ocupará 50% da largura da janela, independentemente da altura.

Algo que pode confundir é achar que essas unidades são o mesmo que porcentagem (%), para entender a distinção, acesse nosso artigo sobre a diferença de vh para porcentagem (%) no CSS.

Como usar unidades de medida vw, vh, vmax e vmin

Exemplo de Uso

Vamos ver um exemplo de como usar essas unidades em seu código CSS:

				
					.container {
  width: 50vw; /* 50% da largura da janela de visualização */
  height: 40vh; /* 40% da altura da janela de visualização */
  max-width: 80vmax; /* Máximo de 80% da largura ou altura, o que for menor */
  min-height: 30vmin; /* Mínimo de 30% da largura ou altura, o que for maior */
}

				
			

Neste exemplo, a classe .container usa as unidades vw, vh, vmax e vmin para dimensionar seus elementos de maneira responsiva.

Vantagens das unidades de medidas responsivas

Usar unidades responsivas como vw, vh, vmax e vmin oferece várias vantagens:

  • Facilitam a criação de layouts responsivos: Você não precisa se preocupar tanto com cálculos complexos para ajustar o tamanho dos elementos em diferentes dispositivos.

  • Reduzem a necessidade de cálculos complicados em CSS: As unidades responsivas tornam seu código mais limpo e mais fácil de entender.

  • Adaptam-se automaticamente a diferentes dispositivos e tamanhos de tela: Seu design se ajusta perfeitamente, independentemente do dispositivo em uso.

  • Aumentam a legibilidade do código: Seus estilos ficam mais claros e concisos quando você usa essas unidades em vez de valores absolutos.

Exemplo prático em HTML e CSS de uso das unidades de medida vw, vh, vmax e vmin

Para ilustrar como podemos aplicar essas unidades em um contexto real, considere o seguinte exemplo prático de um layout de blog responsivo.

HTML Estrutural

				
					<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Blog Responsivo</title>
</head>
<body>
    <header>
        <h1>Meu Blog</h1>
    </header>
    <section class="main-content">
        <article class="post">
            <h2>Título do Artigo</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </article>
        <!-- Mais artigos aqui -->
    </section>
    <footer>
        <p>&copy; 2023 Meu Blog</p>
    </footer>
</body>
</html>

				
			

CSS Responsivo utilizando unidades de medida vw, vh, vmax e vmin

				
					body {
    font-family: 'Arial', sans-serif;
    margin: 0;
}

header {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 2vh;
}

.main-content {
    display: flex;
    flex-direction: column;
    padding: 3vw;
}

.post {
    margin-bottom: 5vh;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 2vmin;
}

				
			

Neste exemplo, utilizamos as unidades vw, vh, vmax e vmin para garantir que os elementos se ajustem de maneira proporcional à tela do usuário.

No entanto, sinta-se à vontade para adicionar mais detalhes ou personalizar o exemplo conforme necessário. Este é apenas um ponto de partida para ilustrar como essas unidades podem ser aplicadas em um projeto real.

Conclusão

Em suma, as unidades vw, vh, vmax e vmin são ferramentas poderosas para a criação de layouts flexíveis e responsivos em CSS. Então, compreendendo como utilizá-las, você pode melhorar a experiência do usuário em seus sites, independentemente do dispositivo que ele esteja usando.

Fique ligado para mais dicas e truques de design da web! Aproveite a flexibilidade dessas unidades e crie designs incríveis e responsivos para sua próxima página da 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.