Questão de Tecnologia da Informação · FGV CVM 2024 (nº 34)

Media queries são regras CSS especiais que permitem aplicar estilos diferentes a uma página web com base nas características do dispositivo do usuário, como a largura da tela. Isso é essencial para criar um design responsivo, onde o layout se adapta para ficar bom em celulares, tablets e desktops.

• (A) Correta: Esta alternativa usa uma media query para aplicar estilos específicos quando a largura da tela for de no máximo 600 pixels (tamanho comum para celulares). Ao definir width: 100% para aside (menu) e main (conteúdo), ambos ocuparão a largura total disponível. Como eles não têm mais espaço para flutuar lado a lado, eles se empilharão verticalmente, colocando o menu acima do conteúdo, que é o comportamento desejado para telas menores.
• (B) Incorreta: O tipo de mídia handheld é obsoleto e não é mais suportado de forma confiável pelos navegadores modernos. Além disso, width: 50% para ambos não faria com que eles se empilhassem ocupando a largura total, podendo ainda tentar flutuar lado a lado se houver espaço.
• (C) Incorreta: A propriedade position: absolute remove os elementos do fluxo normal do documento. Aplicar position: absolute a ambos aside e main sem definir posições (top, left, etc.) faria com que eles se sobrepusessem no mesmo local, em vez de se empilharem. Esta é a armadilha da banca: position: absolute é uma ferramenta poderosa, mas mal utilizada aqui, pois não resolve o problema de empilhamento de forma direta e robusta para este cenário.
• (D) Incorreta: A condição min-width: 768px aplica os estilos para telas maiores que 768 pixels (tablets em paisagem ou desktops). O problema a ser resolvido é em telas menores (celulares), então esta media query aplicaria a mudança de layout no lugar errado, quebrando o design para telas maiores.
• (E) Incorreta: Embora max-width: 480px seja um breakpoint válido para celulares, definir width: 50% para ambos aside e main não garante que eles se empilhem ocupando a largura total. Eles ainda poderiam tentar flutuar lado a lado se houver espaço, ou se empilhariam mas ocupando apenas metade da largura, o que não é o objetivo de "menu acima do conteúdo" com largura total.