Questão de Engenharia de Software · FCC TST 2017 (nº 37)

Uma página web responsiva é aquela que se adapta e se organiza automaticamente para ser bem visualizada em qualquer tamanho de tela, seja de um celular, tablet ou computador. Para conseguir isso, usamos as Media Queries, que são regras CSS que permitem aplicar estilos diferentes dependendo das características do dispositivo (como a largura da tela).

• (A) Incorreta: A sintaxe está errada. @import é uma regra CSS para importar folhas de estilo, geralmente usada dentro de um arquivo CSS ou de um bloco <style>, não como um elemento HTML <@import>. Além disso, a sintaxe type="@media only screen up to 500px” não é válida para Media Queries.
• (B) Incorreta: Embora use o elemento <link rel="stylesheet"> correto para referenciar uma folha de estilos, o atributo type é usado para especificar o tipo MIME do conteúdo (ex: text/css), não para Media Queries. A sintaxe only screen<=500px também está incorreta para uma Media Query. Armadilha da banca: Esta alternativa é tentadora porque usa a tag <link> e rel="stylesheet", que são o início correto para linkar CSS, mas erra na forma de aplicar a Media Query.
• (C) Incorreta: O elemento <style> é para CSS interno na página. Embora se possa usar @import dentro de um bloco <style>, a sintaxe media="screen<=500px" para o atributo media está incorreta, e o uso de @import dentro de <style> para um arquivo externo com essa condição não é a forma padrão e correta para linkar arquivos externos com Media Queries no HTML.
• (D) Incorreta: O atributo rule não existe para o elemento <link>. A sintaxe max-screen:500px também não é uma Media Query válida.
• (E) Correta: Esta é a forma padrão e correta de referenciar uma folha de estilos externa (href="config.css") e aplicar uma Media Query diretamente no HTML usando o atributo media. rel="stylesheet" indica que é uma folha de estilos. media="only screen and (max-width: 500px)" significa que esta folha de estilos será aplicada apenas quando a tela (screen) tiver uma largura máxima de 500 pixels, exatamente como solicitado na questão.