No 5º módulo do curso na aula "finalizando o layout desktop" o professor usou calc no media screen mara o container, o que me deixou em dúvida quanto do efeito (o que isso faz) e a finalidade (quando devo usar e para quê).
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
No 5º módulo do curso na aula "finalizando o layout desktop" o professor usou calc no media screen mara o container, o que me deixou em dúvida quanto do efeito (o que isso faz) e a finalidade (quando devo usar e para quê).
Olá!
Você pode usar o método calc() em diversas propriedades CSS relacionadas a tamanho/espaçamento.
Seu uso é muito específico e geralmente é aplicado para compensar um valor dinâmico com um fixo, como por exemplo, criar uma div que ocupe todo o tamanho vertical da tela, mas que, para não criar um excesso a ponto de gerar uma barra de rolagem, deve-se subtrair o total baseado na altura do cabeçalho da página.
.cabecalho {
background-color: red;
height: 50px;
}
.conteudo {
background-color: blue;
height: calc(100vh - 50px);
}Repare que nesse caso, não seria possível criar o mesmo comportamento utilizando apenas um valor de porcentagem, então, respondendo sua pergunta sobre quando utilizar o método calc(), basta analisar se o comportamento que você deseja alcançar é possível sem utilizar operações matemáticas ou não.