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.
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>© 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?
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
