---
id: 5a9d72ad424fe3d0e10cad16
title: Use a media query to change a variable
challengeType: 0
videoUrl: ''
localeTitle: 使用媒体查询更改变量
---
## Description
CSS变量可以简化您使用媒体查询的方式。例如,当您的屏幕小于或大于媒体查询断点时,您可以更改变量的值,并且无论在何处使用它都将应用其样式。
## Instructions
在media query
的:root
选择器中,对其进行更改,以便重新定义--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
```