Uma página web responsiva é aquela que se adapta automaticam...

Alternativa correta: E

Para entender a questão e a resposta correta, é preciso ter conhecimento sobre CSS Responsivo e o uso de media queries. CSS Responsivo é uma abordagem de design web que visa à criação de páginas que reagem às dimensões da janela de visualização ou dispositivo do usuário. Isso é alcançado através das media queries, que são módulos de CSS3 usados para aplicar estilos diferenciados para diferentes tipos de dispositivos ou resoluções de tela.

A media query correta para aplicar um arquivo CSS específico para dispositivos com uma largura de tela de até 500 pixels é expressa na opção E, utilizando a seguinte tag:

<link rel="stylesheet" media="only screen and (max-width: 500px)" href="config.css">

Neste trecho de código, a tag <link> é usada para vincular um arquivo CSS externo à página HTML. O atributo rel especifica a relação entre o arquivo HTML e o arquivo vinculado, onde o valor stylesheet indica que o arquivo vinculado é uma folha de estilo. O atributo media contém a media query que restringe a aplicação do arquivo CSS a dispositivos que tenham uma tela com um máximo de 500 pixels de largura, o que é indicado por (max-width: 500px). A parte only screen garante que os estilos serão aplicados somente quando o meio for uma tela, excluindo outros tipos de dispositivos, como impressoras.

A correta utilização da media query (max-width: 500px) garante que o arquivo CSS config.css seja aplicado apenas quando a largura da tela do dispositivo for igual ou inferior a 500 pixels, tornando a página responsiva para essas condições.

É essencial entender bem as media queries e a sintaxe do CSS para poder criar páginas web que se adaptem a diversos dispositivos, oferecendo uma boa experiência ao usuário em todas as resoluções de tela.

CSS media types

Desde a época do CSS2, há uma preocupação com o suporte de regras de layout diferentes para cada situação possível. Isso é feito usando os chamados media types, que podem ser declarados ao se invocar um arquivo CSS:

https://www.caelum.com.br/apostila-html-css-javascript/web-para-dispositivos-moveis/#6-2-css-media-types

The @media rule is used to define different style rules for different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called media queries.
Media queries look at the capability of the device, and can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
and much more

Syntax: < link rel="stylesheet" media="mediatype and | not | only (media feature)" href="mystylesheet.css" >

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Gabarito: e)

nao basta as media queries me fuderem na vida real

tem que me fuder em concurso tbm

http://blog.caelum.com.br/flexibilidade-em-paginas-para-dispositivos-moveis-com-media-queries/

e-

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  width and height of the viewport

  width and height of the device

  orientation (is the tablet/phone in landscape or portrait mode?)

  resolution

Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

CSS Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature) {

 CSS-Code;

}

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp