纯CSS if/else语句，包含自定义大小单位变量

我只想用纯CSS解决我的问题。 以下是我遇到的问题代码：

@if (100vh > 830px) {:root { --cwv:100vh;}}
@else {:root { --cwv: 830px;}}

我想做的是：如果浏览器窗口大小小于830px，“-cvw”（自定义宽度变量/单位）应该是相对于830px而不是100vw（内置视口“垂直宽度”单位），因为页面上的元素太小了

我知道我可以使用多种其他方法使用其他语言解决这个问题，但我只是想知道如何让CSS代码工作——正如它应该的那样——根据我所研究的地方：

• -声明变量以以下方式声明：

  ：root{--变量名称：variable value；}

---

我做错了什么？我希望我的代码（我在上面提供的）中也有多个语法错误…：/

对窗口大小使用媒体查询，如下所示

@media screen and (min-width : 830 px) {

  /* your code */

 }

使用

最大宽度

。 例如：

默认值

--cwx

设置为视口宽度：

:root{
  --cwv: 100vw;
}

如果视口宽度小于或等于

830px

，请将

--cwx

设置为

830px

：

@media all and (max-width: 830px){
  :root{
    --cwv: 830px;
  }
}

最后，示例的黑条将设置为

--cwx

的½，因此视口宽度为½，但不小于

830px

（=

415px

）的½：

：根目录{
--cwv:100vw；
}
@全部和全部介质（最大宽度：830像素）{
：根{
--cwv:830px；
}
}
身体{
保证金：0；
}
：root：：之后{
内容：“；
显示：块；
背景：黑色；
高度：10px；
宽度：计算值（var（--cwv）*.5）；
}

CSS没有if/then语句。它有多个由选择器和/或媒体查询选择的规则。你听说过媒体询问吗？如果没有，请返回并重新学习您的基本CSS。