[Dúvida] Display none e block

Olá, tudo bem?

A propriedade "display" é utilizada para definir como um elemento será exibido na página. Quando utilizamos display: none, estamos dizendo que o elemento não deve ser exibido na página, ou seja, ele fica invisível e não ocupa espaço.

Quando utilizamos display: block dentro de um media query, estamos dizendo que, a partir de determinada largura de tela, o elemento deve ser exibido como um bloco e ocupar um espaço na tela. Isso permite tornar o layout responsivo, adaptando-se a diferentes tamanhos de tela.

Ao criarmos um projeto, onde queremos que a estrutura do cabeçalho para desktops, tablets e smatphones seja diferente em cada um deles precisamos inicialmente adicionar ao documento HTML todos os elementos que compõem todas as estruturas desejadas no cabeçalho. Em seguida precisamos mostrar apenas os elementos que fazem parte da estrutura desejada para aquele formato de tela, por isso precisamos mostrar alguns elementos usando o display: block em alguns media-queries e esconder outros com o display: none.

Como exemplo temos o próprio projeto do curso que apresenta estruturas diferentes para desktops, tablets e smartphones.

Em desktops temos a presença do logotipo com o símbolo e o nome da marca, um menu superior com três opções e no canto direito temos dois ícones com suas respectivas descrições.

Em tablets notamos a ausência das descrições dos ícones no canto direito com os dizeres "Minha sacola" e "Meu perfil".

Já nos smartphones percebemos a ausência do nome Alura Books e do menu central e percebemos o aparecimento de um menu hambúrguer no canto esquerdo e de um ícone de coração representando os favoritos.

Dessa forma, sempre quando trabalhamos com diferentes formatos de tela, precisamos utilizar os displays dentro dos media-queries para especificar o que queremos que apareça e o que queremos que fique escondido.

Espero ter ajudado e caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!