css媒体查询不起作用,css媒体查询 @media,css媒体查询是什么,css媒体查询手机端,css媒体查询常见的媒体类型,css媒体查询高度
CSS3变量是CSS中的一种新特性，也称为自定义属性（custom properties），它允许开发者声明一个变量并在需要时引用它。媒体查询（Media Queries）则是指在不同的设备或屏幕尺寸下应用不同样式的技术。

使用CSS3变量结合媒体查询可以实现根据设备或屏幕大小动态改变页面样式的效果。例如，在小屏幕上显示简化版的页面，而在大屏幕上则显示更丰富的内容和布局。

下面是一个使用CSS3变量和媒体查询的示例：

css
:root {
--main-bg-color: #ffffff;
}

@media screen and (max-width: 600px) {
:root {
--main-bg-color: #f5f5f5;
}
}

.header {
background-color: var(--main-bg-color);
}


这个例子中，:root选择器定义了一个名为--main-bg-color的CSS3变量，并将其设置为白色。

接着，通过媒体查询跟踪屏幕大小，当屏幕最大宽度小于600像素时，将--main-bg-color变量的值改为浅灰色。

最后，.header选择器引用了--main-bg-color变量，使用var()函数将其应用到背景颜色属性上。当屏幕宽度小于600像素时，.header元素的背景颜色将变为浅灰色。

这样，我们可以根据不同的设备或屏幕尺寸动态地改变页面样式，提高用户体验。