Question

4)
Dentro do estudo de design responsivo, temos a preparação das mídias responsivas, não significa apenas alterar o tamanho da imagem, mas também inclui práticas cuja finalidade é tornar as imagens responsivas de modo a fornecer ao navegador arquivos de imagem diferentes, todos aparecendo a mesma coisa, mas com diferentes conteúdos, diferentes números de pixels, e com imagens adaptadas para diferentes alocações de espaço.



De acordo com as informações apresentadas na tabela a seguir, faça a associação dos pontos estudados de preparação de mídias responsivas contidos na Coluna A com seus respectivos conteúdos abordados, apresentados na Coluna B.



I. Srcset 1. Define um conjunto de classes de mídia, com as larguras de tela, e indica qual tamanho de imagem seria melhor escolher, quando certas condições de mídia forem verdadeiras.
II. Sizes 2. Ele define o conjunto de imagens que permitiremos ao navegador escolher e o tamanho de cada imagem. Cada conjunto de informações da imagem é separado do anterior por uma vírgula.
III. Direção de arte 3. Solução para tentarmos exibir um conteúdo de imagem idêntico, apenas maior ou menor, a depender do dispositivo.
IV. Resolução de imagens 4. Envolve a mudança da imagem exibida para se adequar a diferentes tamanhos de exibição de imagem.
Assinale a alternativa que apresenta a associação CORRETA entre as colunas.

Alternativas:

a)
I - 4; II - 3; III - 2; IV - 1.

b)
I - 4; II - 1; III - 2; IV - 3.

c)
I - 3; II - 4; III - 1; IV - 2.

d)
I - 2; II - 1; III - 4; IV – 3


e)
I - 1; II - 3; III - 2; IV - 4.

Answer 1

Resposta:
d)

I - 2; II - 1; III - 4; IV – 3

Explicação:

Explicando melhor os atributos srcset e sizes

1. srcset: ele define o conjunto de imagens que permitiremos ao navegador escolher e o tamanho de cada imagem. Cada conjunto de informações da imagem é separado do anterior por uma vírgula. Para cada um iremos escrever:

• Um nome de arquivo de imagem

• Um espaço.

• A largura intrínseca da imagem em pixels

2. sizes: define um conjunto de condições de mídia, com as larguras de tela, e indica qual tamanho de imagem seria melhor escolher, quando certas condições de mídia forem verdadeiras. Nesse caso, antes de cada vírgula devemos escrever:

• Uma condição de mídia (exemplo= (max-width:600px)) – adotamos 600 px, pois estamos dizendo "quando a janela de visualização a largura for de 600 pixels ou menos".

• Um espaço.

• A largura do slot que a imagem preencherá quando a condição da mídia for verdadeira ( exemplo  = 480 px).