使用css调整窗口大小时更改颜色

对于流体字体，我使用以下公式：

font-size: calc(30px + (60-30)*(100vw - 400px)/(2500-400));

我想根据窗口的大小改变颜色，例如，如下所示：

 .container {
    color: #FF0000;

    @media screen and (min-width: 700px) {
        color: #FF00FF;
    }

    @media screen and (min-width: 1000px) {
        color: #00FF00;
    }

    @media screen and (min-width: 1200px) {
        color: #FFFFFF;
    }
  }

是否有更聪明的方法只使用css，即使用calc重新计算颜色值，同时考虑大众

伪代码示例：

color: #FFF + calc(00 + XXX) 

---

您可以使用CSS变量和HSL颜色。然后可以更改每个断点中的值

大概是这样的：

：根目录{
--色调：0；
--文字颜色：hsl（色差（-）、100%、50%）；
}
p{
颜色：var（--文本颜色）
}
@媒体屏幕和屏幕（最小宽度：480px）{
：根{
--色调:70 ;；
}
}
@媒体屏幕和屏幕（最小宽度：700px）{
：根{
--色调：90；
}
}

---

嘿，我有一些文本

十六进制颜色值不能出现在

calc

CSS函数中。您可以使用SASS来实现这一点，但这仅限于在呈现页面之前解析值。如果您希望根据页面生命周期中的事件应用更改，您唯一的选择是JavaScript。谢谢，但这正是我想要避免的-我想去掉断点。@Aiwatko好吧，那么就不可能了。没有断点是不可能的：）