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

CSS Media Queries

Gabarito: letra C. A regra @media only screen and (min-width: 100px) aplica o estilo quando a largura da viewport é maior ou igual a 100 pixels. O operador min-width define um limite inferior — a condição é verdadeira para larguras ≥ 100px.

A banca testa o entendimento básico de min-width vs max-width. A pegadinha comum é confundir com max-width (que seria ≤ 100px).

Alternativa A — ❌ Incorreta

Afirma que a largura deve ser menor ou igual a 100px. Isso corresponde a max-width: 100px, não min-width. O código dado usa min-width, que exige largura ≥ 100px.

Alternativa B — ❌ Incorreta

A regra não especifica tipo de dispositivo (desktop/mobile). O termo only screen restringe a mídia a telas, mas não a um formato específico. A condição decisiva é a largura, não o dispositivo.

Alternativa C — ✅ Correta ⟵ GABARITO

Exatamente: min-width: 100px significa que o bloco de estilos será aplicado quando a largura da viewport for ≥ 100 pixels. É a interpretação direta da sintaxe.

Alternativa D — ❌ Incorreta

A regra não menciona dispositivo móvel. Embora only screen seja comum em mobile, a condição é puramente de largura — poderia ser um desktop com viewport estreita.

Alternativa E — ❌ Incorreta

A regra define a cor de fundo vermelha para o body quando a condição é atendida; ela não é uma condição para aplicar a regra. A descrição inverte causa e efeito.

Gabarito: letra C