Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Mais informações sobre calc e diferentes dispositivos

Olá, pessoal!

Assistindo à atividade 4 da aula 4 do curso, depois do que o professor explicou sobre calc, compreendi como montar as equações e qual é a função dele, mas ainda fiquei com muitas dúvidas em como utilizar essa propriedade para manter proporções em qualquer dispositivo, com qualquer tamanho de tela. Por que o professor comenta que utiliza o calc pelo menos uma vez em cada projeto? Em qual momento da criação é realmente necessário?

Alguém poderia me explicar com mais detalhes/exemplos ou teria indicação de artigos que possam me auxiliar na compreensão? Muito obrigada e bons estudos! :)

4 respostas
solução!

Olá, Júlia.

Tudo bem?

Nesse curso você vai aprender a adaptar o seu site para diferentes tamanhos de telas, você vai ver que é preciso mudar algumas propriedades no seu CSS para ele regir de acordo com o tamanho de tela especificado. Quem determina as alterações nos diferentes dispositivos é uma coisa chamada media queries, é com ela que definimos o tamanho da tela, e colocamos todo o nosso CSS referente ao tamanho dessa tela dentro dela. A sintaxe dela é basicamente assim: @media screen and (max-width: 480px) é essa media querie quemantém o estilo CSS para a tela especificada.

Agora o cálculo pode ser útil quando precisar alterar o tamanho de uma imagem por exemplo que está na versão desktop e precisa adaptá-la para a versão mobile de celular, se no computador a imagem está com width: 100%; e você precisa que ela tenha na versão mobile 50%, ai dentro da media query você chama a classe da imagem e coloca um width: calc(100% / 2); que o resultado será 50%, ou simplesmente você calcula b=na cabeça e coloca width: 50%;.

Espero ter ajudado.

Qualquer dúvida manda aqui de novo :)

Valeu Julia.

Essa parte realmente ficou confusa, porque parece que é só fazer um cálculo, que parece um tanto quanto arbitrário, apesar de usar a dimensão da tela do celular para tal. Achei que ficou um pouco jogado essa aula no curso. Imagino que existam outras formas de fazer um design responsivo de forma mais fácil e que resulte em algo melhor do que foi colocado na aula e que iremos aprender em outro conteúdo de front-end.

Oi, Renan! Muito obrigada pela resposta, já me ajudou um pouquinho, sim. Acho que esse assunto, esse conhecimento, é um pouco mais aprofundado, vou conseguir entender 100% e colocar em prática mais além, depois que tiver trabalhando com HTML e CSS por um tempinho. Mas assim já tenho um pouco de noção, o que vai me ajudar adiante.

Obrigadão! :)

Oi, Karel! Então... Também concordo com isso, inclusive deixei um comentário no final do curso como sugestão. Talvez nessa aula ainda não seria o momento de falar sobre esse assunto, muito cedo, não sei. Porque também tive a sensação de ter sido um conteúdo muito rápido, sem profundidade, sem muitas explicações e nem com oportunidades para colocarmos em prática. Mas vamos ver logo a seguir. Acredito que vá surgir outro curso, outra formação, que trate melhor do assunto.

Valeu, bons estudos! :)