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

Question

我只想使用纯CSS来解决我的问题。以下是我有问题的代码：

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

我想做的是：如果浏览器窗口大小小于830px，"-cfw"（自定义宽度变量/单位）应该是相对_{（我的代码可能有另一个问题）}到830px，而不是100vw_{，因为页面上的元素太小了。}

我知道我可以使用多种其他方法使用其他语言来解决这个问题，但我只是想知道如何根据我研究过的地方使CSS代码正常工作：

• CSS自定义属性（变量）-声明变量以以下方式声明：:root{--variable-name: variable-value;}

• CSS条件（if/else语句）

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

Answer 1

使用媒体查询max-width。示例：

默认--cwx设置为视口宽度：

:root{
  --cwv: 100vw;
}

如果视口宽度小于或等于830px，请将--cwx设置为830px:

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

最后，示例的黑条将设置为--cwx的½，因此为视口宽度的½，但不小于830px的½（=415px）：

:root{
  --cwv: 100vw;
}
@media all and (max-width: 830px){
  :root{
    --cwv: 830px;
  }
}
body{
  margin: 0;
}
:root::after{
  content: "";
  display: block;
  background: black;
  height: 10px;
  width: calc(var(--cwv) * .5);
}

Answer 2

使用媒体查询下面的窗口大小

@media screen and (min-width : 830 px) {
  /* your code */
 }