Pular para o conteúdo principal

Questão de Programação — CSS (Cascading Style Sheets) — FGV 2024

ProgramaçãoCSS (Cascading Style Sheets)
Código
fg077403
Banca
FGV
Órgão
CVM
Ano
2024
Nível
Superior
Cargo
Analista - Perfil 8 - TI / Sistemas e Desenvolvimento - Tarde
Ao configurar o design de uma página, Roberto usou o código CSS a seguir, em uma tag style, fazendo com que um menu de navegação lateral fique ao lado da área de conteúdo.aside {float: left; width: 30%}main {float: left; width: 70%}O resultado em tablets e desktops foi bom, mas o acesso pelo celular apresentou alguns problemas de usabilidade, sendo mais adequado que o menu ficasse acima do conteúdo.Para utilizar o design indicado em telas menores, garantindo a responsividade da página, Roberto acrescentou ao código CSS:
  1. A@media screen and (max-width: 600px) {aside, main {width: 100%}} .
  2. B@media handheld {aside, main {width: 50%}
  3. C@media screen and (max-width: 600px) {aside, main {position: absolute}} .
  4. D@media screen and (min-width: 768px) {aside, main {width: 100%}}
  5. E@media (max-width: 480px) {aside, main {width: 50%}} .
Revelar gabarito e comentário

GabaritoA — @media screen and (max-width: 600px) { aside, main {width: 100%} } .

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

CSS – Media Queries para Responsividade

Gabarito: letra A. A alternativa A utiliza a media query @media screen and (max-width: 600px) para aplicar width: 100% aos elementos aside e main, fazendo com que eles ocupem toda a largura do container e, consequentemente, se empilhem verticalmente – comportamento desejado para telas pequenas. As demais alternativas falham em atender ao requisito de empilhamento em mobile.

Alternativa A — ✅ Correta ⟵ GABARITO

Aplica width: 100% em telas com largura máxima de 600px. Como ambos os elementos são block e estão flutuados, a largura total força cada um a ocupar a linha inteira, empilhando o menu acima do conteúdo.

Alternativa B — ❌ Incorreta

Usa o media type handheld, que é obsoleto e não é suportado consistentemente. Além disso, define width: 50%, que não empilha corretamente (os elementos ainda tentariam ficar lado a lado).

Alternativa C — ❌ Incorreta

Define position: absolute, que remove os elementos do fluxo normal e impede o empilhamento desejado. Além disso, não ajusta a largura, quebrando o layout.

Alternativa D — ❌ Incorreta

Utiliza min-width: 768px, ou seja, aplica a regra para telas maiores que 768px – o oposto do necessário. A regra teria efeito em desktops, não em celulares.

Alternativa E — ❌ Incorreta

Embora use max-width: 480px, define width: 50%. Com 50% de largura cada, os elementos ainda flutuam lado a lado (se couberem), sem empilhamento.

NÃO CAIA NESSA!

A banca explora a confusão entre max-width e min-width. A alternativa D inverte o sentido: min-width aplica a regra para telas acima do valor, quando o correto é max-width para telas abaixo do valor. Outra armadilha é o uso do obsoleto handheld (alternativa B). Fique atento: sempre verifique a direção da condição e a unidade de largura (100% para empilhar).

Gabarito: letra A.

Link permanente: /questoes/fg077403