有媒体查询

你可以在媒体查询中重新设置变量，并将这些新值在任何使用它们的位置级联，这是预处理器变量无法实现的。

这里，媒体查询更改用于设置非常简单网格的变量：

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:root{
    --width: 25%;
    --content: 'This is desktop';
}
@media only screen and (max-width: 767px){
    :root{
        --width:50%;
        --content: 'This is mobile';
    }
}
@media only screen and (max-width: 480px){
    :root{
        --width:100%;
    }
}

div{
    width: calc(var(--width) - 20px);
    height: 100px;
}
div:before{
    content: var(--content);
}

/* Other Styles */
body {
    padding: 10px;
}

div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    float:left;
    margin: 10px;
    border: 4px solid black;
    background: red;
}

你可以尝试在此 CodePen 演示中调整窗口大小

以下是调整大小的动画屏幕截图：

https://i.stack.imgur.com/GXWRP.gif