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

[Dúvida] Media query não está aplicando

Olá, tudo bem?

Estou com a seguinte dúvida, estou utilizando a resolução de tela 1920x1080 em meu notebook, e zoom 100% do navegador Google Chrome, porém a estilização "@media screen and (min-width: 1728px)" não está sendo aplicada, apenas se eu reduzir o zoom da página para 80%. Se a largura mínima para aplicar os estilos é 1728x, não deveria estar aplicando em meu computador normalmente?

Segue as imagens para melhor entendimento.

Configuração do navegador com 100% de zoom.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Configuração do navegador com 80% de zoom

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Código header.css

@media screen and (min-width: 1728px) {
    .container__link {
        display: flex;
        align-items: center;
    }
}
2 respostas
solução!

Olá Moises, tudo bem?

Pelo que entendi, você está tentando aplicar uma estilização para telas com largura mínima de 1728px, porém essa estilização só está sendo aplicada quando você reduz o zoom da página para 80%. Isso é um comportamento um pouco inesperado, mas pode ser explicado.

A resolução 1920x1080 que você mencionou é a resolução total do seu monitor, mas isso não significa que a janela do navegador está utilizando toda essa resolução. A largura da janela do navegador pode ser menor que 1920px devido a vários fatores, como a presença de barras de ferramentas, abas abertas, entre outros.

Além disso, o zoom do navegador também afeta a largura da viewport (a área visível da janela do navegador). Quando você aumenta o zoom para 100%, a largura da viewport diminui, pois você está "ampliando" o conteúdo da página. Por outro lado, quando você diminui o zoom para 80%, a largura da viewport aumenta, pois você está "reduzindo" o conteúdo da página.

Portanto, é possível que a largura da viewport do seu navegador, com zoom de 100%, seja menor que 1728px, e é por isso que a estilização não está sendo aplicada. Quando você reduz o zoom para 80%, a largura da viewport aumenta e ultrapassa os 1728px, fazendo com que a estilização seja aplicada.

Uma maneira de verificar a largura atual da viewport do seu navegador é utilizando as ferramentas de desenvolvedor do Google Chrome. Pressione F12 para abrir as ferramentas de desenvolvedor, clique na aba "Console", digite window.innerWidth e pressione Enter. Isso irá retornar a largura atual da viewport em pixels.

Espero ter ajudado e bons estudos!

Opa, obrigado pela resposta, mais um conhecimento agregado, muito obrigado!

Estarei finalizando o projeto com um zoom menor para que possa acompanhar o progresso da mesma forma que a instrutora realiza!

Valeu!