---
id: 5a9d72ad424fe3d0e10cad16
title: Use a media query to change a variable
challengeType: 0
videoUrl: ''
localeTitle: Usa una consulta de medios para cambiar una variable
---
## Description
Las Variables CSS pueden simplificar la forma en que utiliza las consultas de medios. Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use.
## Instructions
En el :root
selector de :root
de la media query
, cámbielo para que --penguin-size
se redefina y se le dé un valor de 200px
. Además, redefine --penguin-skin
y dale un valor de black
. Luego cambie el tamaño de la vista previa para ver este cambio en acción.
## Tests
```yml
tests:
- text: ':root
debe reasignar la variable --penguin-size
a 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
debe reasignar la variable --penguin-skin
a 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
```