---
id: 5a9d72ad424fe3d0e10cad16
title: Use a media query to change a variable
challengeType: 0
videoUrl: ''
localeTitle: Use uma consulta de mídia para alterar uma variável
---
## Description
Variáveis CSS podem simplificar a maneira como você usa as consultas de mídia. Por exemplo, quando a tela é menor ou maior que o ponto de interrupção da consulta de mídia, você pode alterar o valor de uma variável e aplicar seu estilo onde quer que ela seja usada.
## Instructions
No seletor :root
da media query
, altere-o para que --penguin-size
seja redefinido e tenha um valor de 200px
. Além disso, redefina --penguin-skin
e dê a ele um valor de black
. Em seguida, redimensione a visualização para ver essa alteração em ação.
## Tests
```yml
tests:
- text: ':root
deve reatribuir a variável --penguin-size
para 200px
.'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), ":root
should reassign the --penguin-size
variable to 200px
.");'
- text: ':root
deve reatribuir a variável --penguin-skin
para black
.'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ":root
should reassign the --penguin-skin
variable to black
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```