---
id: 5a9d72ad424fe3d0e10cad16
title: Use a media query to change a variable
challengeType: 0
videoUrl: ''
localeTitle: Использование медиа-запроса для изменения переменной
---
## Description
Переменные CSS могут упростить использование медиа-запросов. Например, когда ваш экран меньше или больше точки прерывания вашего медиа-запроса, вы можете изменить значение переменной, и она будет применять свой стиль везде, где он используется.
## Instructions
В :root
селекторе media query
измените его так: --penguin-size
переопределяется и задается значение 200px
. Кроме того, переопределите --penguin-skin
и придайте ему значение black
. Затем измените размер предварительного просмотра, чтобы увидеть это изменение в действии.
## Tests
```yml
tests:
- text: ':root
должен переназначить переменную --penguin-size
до 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
должен переназначить переменную --penguin-skin
на 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
```