└─📂 Front-end

└─📄 3: Imagens Responsivas: srcset, Picture e object-fit em Foco

Domine as Unidades Relativas: vw, vh, rem, em e %!

As unidades relativasPosicionamento: static, relative, absolute, fixed, stickyDescubra como usar os métodos de posicionamento CSS, de static a sticky, para criar layouts interativos, precisos e eficazes. são extremamente importantes para criar layouts responsivosLayouts Responsivos com HTML e CSSAprenda a criar layouts responsivos com HTML, CSS e Flexbox. Utilize unidades fluidas e media queries para otimizar sites em todos os dispositivos. em CSS. Elas permitem que o tamanho dos elementos e fontes se adapte a diferentes tamanhos de tela e ambientes sem a necessidade de ajustes manuais para cada breakpoint. Neste tutorial, vamos explorar vw, vh, rem, em e %, destacando suas principais características e como utilizá-las de forma eficaz.

Visão Geral🔗

Existe uma variedade de unidades de medida em CSSO que é CSS?Descubra como o CSS transforma a aparência das páginas web, separando conteúdo de design para melhor organização e flexibilidade., mas aquelas consideradas relativasPosicionamento: static, relative, absolute, fixed, stickyDescubra como usar os métodos de posicionamento CSS, de static a sticky, para criar layouts interativos, precisos e eficazes. se ajustam ao contexto em que estão inseridas. Isso ajuda a criar interfaces mais flexíveis, especialmente em dispositivos móveis. Veja abaixo as diferenças entre elas:

Unidade	Significado	Exemplo Prático	Observação
`vw`	Viewport Width (largura da tela ou janela de exibição)	`font-size: 5vw;`	1 `vw` = 1% da largura total da viewport (área visível)
`vh`	Viewport Height (altura da tela ou janela de exibição)	`height: 50vh;`	1 `vh` = 1% da altura total da viewport
`rem`	Referencia o tamanho de fonte do elemento raiz (`<html>`), por padrão	`font-size: 1.5rem;`	Facilita manter tamanhos proporcionais consistente em toda página
`em`	Baseia-se no tamanho de fonte do elemento pai	`padding: 2em;`	O valor pode mudar dependendo do nível hierárquico de cada elemento
`%`	Percentual em relação ao contêiner ou propriedade específica	`width: 80%;`	Geralmente relativa ao pai, mas em propriedades relacionadas a texto, pode seguir o tamanho de fonte do próprio elemento (depende)

Entendendo vw e vh🔗

vw e vh consideram a dimensão do navegador, seja ele desktop, tablet ou mobile:

vw (ViewportResponsividade com HTML: Viewport e `<picture>`Descubra como usar a meta viewport e o elemento picture para imagens responsivas, garantindo desempenho, usabilidade e SEO de qualidade. Width): 1vw corresponde a 1% da largura total visível do navegador. Se um navegador tem 1000px de larguraSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos., 1vw será igual a 10px.
vh (ViewportResponsividade com HTML: Viewport e `<picture>`Descubra como usar a meta viewport e o elemento picture para imagens responsivas, garantindo desempenho, usabilidade e SEO de qualidade. Height): 1vh corresponde a 1% da altura total visível do navegador. Se a alturaSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. visível é 600px, 1vh será 6px.

Essas unidades são muito úteis para manter áreas fluidas, garantindo que elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. se redimensionem automaticamente conforme a tela muda de tamanho.

Exemplo de uso:

header {
  width: 100vw;    /* Ocupa toda a largura da tela */
  height: 50vh;    /* Metade da altura visível */
  background-color: lightblue;
}

Neste exemplo, o header sempre ocupará 100% da larguraSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. da viewportResponsividade com HTML: Viewport e `<picture>`Descubra como usar a meta viewport e o elemento picture para imagens responsivas, garantindo desempenho, usabilidade e SEO de qualidade. e 50% da alturaSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. dela, independentemente da resolução do dispositivo.

Trabalhando com rem🔗

A unidade rem é baseada no tamanho de fonte definido no elemento raizCSS Custom Properties: :root, var()Aprenda, com exemplos práticos, como implementar CSS Custom Properties corretamente para criar designs sustentáveis e de fácil manutenção para seu site., normalmente o <html>. Por padrão, muitos navegadores definem 16px como tamanho de fonte inicial:

1rem = tamanho de fonte raiz (geralmente 16px).
Se você alterar o font-sizeTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional. no <html> para 18px, então 1rem passará a ser 18px.

Isso ajuda a manter consistência tipográfica e facilita ajustes globais. Em um único lugar (elemento raizCSS Custom Properties: :root, var()Aprenda, com exemplos práticos, como implementar CSS Custom Properties corretamente para criar designs sustentáveis e de fácil manutenção para seu site.), você controla a escala de toda a página.

Exemplo de uso:

html {
  font-size: 16px; /* Tamanho base */
}
h1 {
  font-size: 2rem; /* Equivale a 32px se 1rem = 16px */
}
p {
  font-size: 1rem; /* Equivale a 16px */
}

Desta forma, se no futuro você quiser aumentar todo o texto do site, basta editar html { font-sizeTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional.: 18px; }, e todo o conteúdo irá escalar naturalmente.

Comparando em e rem🔗

Enquanto o rem se baseia no font-size do elemento raizCSS Custom Properties: :root, var()Aprenda, com exemplos práticos, como implementar CSS Custom Properties corretamente para criar designs sustentáveis e de fácil manutenção para seu site., o em está relacionado ao font-sizeTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional. do próprio elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. pai ou do elemento em que está definido. Cada nível de aninhamentoPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. pode alterar o valor de 1em se tiver um font-sizeTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional. diferente.

Exemplo de uso de em:

.container {
  font-size: 16px;
}
.container p {
  font-size: 1.5em; /* 24px, pois 1em = 16px no contexto do container */
}
.container .sub-container {
  font-size: 20px;
}
.container .sub-container span {
  font-size: 1.5em; /* Agora 1em = 20px => 1.5em = 30px */
}

Perceba que em pode se tornar cumulativo: se houver vários níveis de aninhamentoPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo., isso pode causar valores diferentes do esperado. Por isso, rem é muitas vezes preferível quando se busca maior previsibilidade.

Uso de %🔗

A unidade de porcentagem (%) se refere, em grande parte dos casos, a dimensões do elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. pai. Por exemplo, width: 50%; faz com que o elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. ocupe metade da largura disponível de seu contêiner. Já em contextos de font-sizeTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional., a porcentagem é aplicada sobre o tamanho de fonte herdadoHerança Básica: Introdução ao ConceitoDescubra como a herança em CSS simplifica a organização dos estilos, promovendo economia de código e manutenção facilitada. Aprenda o conceito agora! do pai.

Exemplo de uso:

.container {
  width: 80%;     /* 80% da largura do elemento pai */
  margin: 0 auto; /* Centraliza horizontalmente quando há largura fixa do pai */
}
.container p {
  font-size: 120%; /* 120% do tamanho de fonte definido em .container */
}

Essa unidade é muito usada em layouts fluidos, principalmente em larguras, alturas e espaçamentos, para adequar elementos dentro de um contêiner responsivoResponsividade com HTML: Viewport e `<picture>`Descubra como usar a meta viewport e o elemento picture para imagens responsivas, garantindo desempenho, usabilidade e SEO de qualidade..

Escolhendo a Unidade Ideal🔗

A escolha da unidade adequada depende do objetivo de estilização:

1. vw e vh

Ideais para definir dimensões que ocupem uma fraçãoGrid Responsivo: fr, minmax(), repeat()Descubra como criar grids flexíveis e responsivos com CSS Grid, explorando fr, minmax() e repeat() para layouts modernos em seu site. específica da tela independentemente de contêineres internos.
Úteis em seções que devem ocupar toda a tela ou parte exata dela.

2. rem

Facilita manter consistência tipográfica e em espaçamentos em todo o layout.
Faz ajustes globais de forma simples alterando apenas o font-sizeTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional. do <html>.

3. em

Bom quando se deseja que o tamanho seja inteiramente dependente do elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. pai.
Pode gerar surpresas se houver muitos níveis de aninhamentoPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo., pois o valor de 1em pode variar em cada nível.

4. %

Excelente para larguras e alturas que precisam ser proporcionais ao contêiner.
Em fontes, depende do font-sizeTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional. do elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. pai.

Em muitos casos, o uso combinado de rem para fontesTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional. e % ou vw/vh para larguras e alturas pode resultar em um design responsivoResponsividade com HTML: Viewport e `<picture>`Descubra como usar a meta viewport e o elemento picture para imagens responsivas, garantindo desempenho, usabilidade e SEO de qualidade. e equilibrado.

Exemplo Prático e Dicas🔗

Suponha que você queira criar uma section que ocupe toda a alturaSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. da tela e dentro dela um título e um parágrafoFormatação de Texto: `<p>`, `<h1>-<h6>`, `<strong>`, `<em>`Aprenda a formatar textos em HTML com tags de parágrafo, títulos e destaques, organizando seu conteúdo e garantindo semântica. proporcionais entre si:

section.full-screen {
  width: 100%;
  height: 100vh; /* Define a altura igual à altura visível da tela */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: lightgray;
}
section.full-screen h1 {
  font-size: 2rem; /* 2x o tamanho de fonte raiz */
  margin-bottom: 1rem; /* Espaçamento em relação ao parágrafo */
}
section.full-screen p {
  font-size: 1rem;
  width: 60%; /* 60% da largura do section */
  text-align: center;
  line-height: 1.5; /* Deixa o texto mais legível */
}

Observe que:

O height: 100vh; faz a section ocupar a tela do dispositivo (sem precisar de media queriesResponsividade com HTML: Viewport e `<picture>`Descubra como usar a meta viewport e o elemento picture para imagens responsivas, garantindo desempenho, usabilidade e SEO de qualidade.).
font-sizeTrabalhando com Fontes, Cores e FundosDescubra neste tutorial completo como aplicar corretamente fontes, cores e fundos em sua página web, garantindo um design moderno e funcional.: 2rem; e 1rem; mantêm a relação de tamanho global.
width: 60%; ajusta a larguraSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. do texto em relação ao contêiner.

Conclusão🔗

As unidades relativasPosicionamento: static, relative, absolute, fixed, stickyDescubra como usar os métodos de posicionamento CSS, de static a sticky, para criar layouts interativos, precisos e eficazes. vw, vh, rem, em e % são ferramentas essenciais no desenvolvimento de interfaces fluídas e responsivasResponsividade com HTML: Viewport e `<picture>`Descubra como usar a meta viewport e o elemento picture para imagens responsivas, garantindo desempenho, usabilidade e SEO de qualidade.. Dominar essas unidades vai tornar seu CSS mais flexível e simplificar a manutenção do projeto, pois você terá a liberdade de redimensionar componentesTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. com facilidade.

Sempre avalie o contexto em que a unidade será usada para escolher a mais adequada. Assim, suas páginas responderão melhor às diversas telas, proporcionando uma experiência consistente ao usuário.

Autor: Marcelo V. Souza - Engenheiro de Sistemas e Entusiasta em IoT e Desenvolvimento de Software, com foco em inovação tecnológica.

📁Início

└─📂 Front-end

└─📄 3: Imagens Responsivas: srcset, Picture e object-fit em Foco

Referências🔗

DevDocs oferece uma documentação rápida e acessível sobre CSS, incluindo unidades de medida relativas: devdocs.io/css/
FreeCodeCamp oferece um curso de design web responsivo que inclui o uso de unidades CSS relativas para criar layouts flexíveis: www.freecodecamp.org/learn/responsive-web-design/#basic-css
MDN Web Docs fornece uma documentação abrangente sobre CSS, incluindo unidades relativas como vw, vh, rem, em, e %: developer.mozilla.org/pt-BR/docs/Web/CSS
W3Schools oferece tutoriais e exemplos práticos sobre CSS, incluindo o uso de unidades relativas para layouts responsivos: www.w3schools.com/css/