Question

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

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重新计算颜色值，考虑到vw？

伪代码示例：

color: #FFF + calc(00 + XXX)

Answer 1

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

这样的事情： fiddle

:root {
  --hue: 0;
  --text-color: hsl(var(--hue),  100%, 50%);
}

p {
  color: var(--text-color)
}


@media screen and (min-width: 480px) {
  :root {
    --hue: 70;
  }
}

@media screen and (min-width: 700px) {
  :root {
    --hue: 90;
  }
}

<p>Hey, i'm some text</p>

用css调整窗口大小的颜色

1 个答案: