Questão 1893973

• Banca: FGV
• Órgão: IBGE
• Ano: 2016
• Provas: FGV - 2016 - IBGE - Tecnologista - Programação Visual - Webdesign
• Disciplina: Programação
• Assuntos: CSS (Cascading Style Sheets)

Um website foi diagramado de modo a exibir seu conteúdo em três colunas de acordo com o seguinte código CSS:

.col-1 {width: 20%};

.col-2 {width: 50%};

.col-3 {width: 25%}

Entretanto, em dispositivos com largura de tela máxima de 640 pixels (ou quando a janela do navegador for reduzida a esta largura máxima), cada coluna deve ocupar 100% da largura de tela. Para tal, o webdesigner responsável pelo desenvolvimento do website optou por usar uma media query para detectar o tamanho da janela, alterando a largura de todas as colunas quando necessário. A sintaxe correta do código usado é:

• A. @media only screen and (max-width: 640px) { [class*="col-"] { width: 100%; } }
• B. @media screen (max-width: 640px) { ["col-*"] { width: 100%; } }
• C. @media max-width: 640px { [class*="col-"] { width: 100%; } }
• D. @media only screen (max-width: 640px) { [“col-*"] { width: 100%; } }
• E. @media (max-width: 768px) only screen { [class*="col-"] { width: 100%; } }

Gabarito: A

Comentários

• questão parecida !

  Q773006

• Quem não tem acesso:  - -> A

• a-

  A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

  @media not|only mediatype and (expressions) {

   CSS-Code;

  }

  The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

  Unless you use the not or only operators, the media type is optional and the all type will be implied.

  You can also have different stylesheets for different media:

  <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

  The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

  @media screen and (min-width: 480px) {

   body {

     background-color: lightgreen;

   }

  }

  https://www.w3schools.com/css/css3_mediaqueries.asp