As estruturas de media-queries proporcionam o estabeleciment...
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
Gabarito comentado – Alternativa D:
A questão aborda o tema das media queries no CSS, que são utilizadas para aplicar estilos condicionais com base em características do dispositivo do usuário, como tipo de mídia (tela ou impressão) e dimensões de resolução. Esse é um conceito fundamental para desenvolver designs responsivos, que se adaptam a diferentes tamanhos de tela e dispositivos.
Para resolver essa questão, é necessário conhecer a sintaxe correta das media queries e entender que os valores e operadores utilizados devem ser suportados pelo CSS. Cada uma das alternativas, exceto a alternativa correta, apresenta um uso legítimo de media query:
- A - Aplica estilos para telas com largura máxima de 767 pixels.
- B - Aplica estilos para telas com uma largura entre 768 e 991 pixels.
- C - Mesmo sendo uma condição incomum, tecnicamente seria uma media query para impressão em dispositivos com largura máxima de 599 pixels, mas na prática, a maioria das impressoras não considera a largura para aplicar estilos.
- E - Aplica estilos quando o dispositivo está em orientação paisagem (landscape).
A alternativa D - @media screen and (device: mobile) { ... }
é a opção incorreta porque utiliza um valor (device: mobile) que não é uma expressão válida dentro de uma media query. Em CSS, não existe uma consulta de mídia baseada em um tipo de dispositivo como 'mobile'. As media queries são baseadas em características quantificáveis, como largura (width), altura (height), resolução (resolution) e orientação (orientation), mas não identificam tipos específicos de dispositivos.
Portanto, a construção correta de media queries não inclui identificadores de dispositivos, como 'mobile', 'tablet', etc., mas sim características físicas ou de exibição do dispositivo em questão. Assim, a alternativa D é a resposta certa, pois apresenta uma sintaxe que não é reconhecida pelo CSS para media query.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo
Comentários
Veja os comentários dos nossos alunos
O erro esta em device: mobile
Clique para visualizar este comentário
Visualize os comentários desta questão clicando no botão abaixo